Maison > interface Web > tutoriel CSS > Comment implémenter le style de ligne pointillée CSS

Comment implémenter le style de ligne pointillée CSS

php中世界最好的语言
Libérer: 2017-12-01 11:43:12
original
3123 Les gens l'ont consulté

En parlant du style de ligne pointillée du CSS, nous penserons au solide de la bordure. La probabilité d'utiliser du solide dans la mise en page de la page Web devrait être la plus élevée, mais savez-vous qu'il existe des lignes pointillées en pointillés et en pointillés. des lignes pointillées cendrées ? Aujourd'hui je vais vous présenter ces deux méthodes pour réaliser des lignes pointillées avec des attributs.

En parlant de style de ligne pointillée CSS, vous devriez penser à une bordure solide. Solid est le plus susceptible d'être utilisé dans la mise en page de page Web. Si vous souhaitez avoir l'effet d'une ligne pointillée CSS, vous pouvez également utiliser. image comme support, mais ce n'est pas le cas. Il est recommandé d'essayer d'utiliser le style de ligne pointillée CSS pour obtenir cet effet de ligne pointillée. Ensuite, le style de ligne pointillée CSS est en pointillés et en pointillés dans la bordure. sont des lignes pointillées CSS, mais elles sont différentes.

1.ligne pointillée pointillée

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div>大家好,我是dotted虚线!</div>
</body>
</html>
Copier après la connexion

2.ligne pointillée pointillée

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div>大家好,我是dashed虚线!</div>
</body>
</html>
Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour des choses plus excitantes. , veuillez faire attention à php Chinois Autres articles connexes en ligne !

Lecture connexe :

Comment utiliser la fonction CSS3 rotate()

CSS3 pour créer un fil d'Ariane de style circulaire Étapes d'implémentation du code

Plusieurs façons de se positionner dans les projets front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal