Maison >interface Web >tutoriel CSS >Comment créer un style de ligne pointillée CSS et exemples d'application du style de ligne pointillée
Comment créer un style de ligne pointillée CSS et exemples d'application du style de ligne pointillée
- yuliaoriginal
- 2018-09-18 14:41:386457parcourir
Afin de présenter un certain effet lors de la mise en page, il est souvent nécessaire d'utiliser le style de ligne pointillée CSS, mais de nombreux novices ne sont encore pas familiers avec le style de ligne pointillée CSS. Cet article vous en parlera. , Comment utiliser la propriété CSSborder pour créer un style de ligne pointillée , et quelques exemples d'application du style de ligne pointillée CSS. Par exemple : l'utilisation de la bordure pointillée CSS, l'utilisation de la bordure inférieure pointillée CSS, l'utilisation de ligne pointillée, etc. Les amis dans le besoin peuvent s'y référer.
1. Comment créer des lignes pointillées CSS
L'attribut border-style peut définir le style des quatre bordures d'un élément. Ses valeurs d'attribut communes sont. comme suit :
pointillé : pointillé, rendu sous forme de ligne continue dans la plupart des navigateurs
pointillé : ligne pointillée, rendu sous forme de ligne continue dans la plupart des navigateurs
solide : ligne continue définie
aucun : pas de bordure
double : L'implémentation du style pointillé CSS double ligne
consiste à utiliser les valeurs d'attribut en pointillés et en pointillés.
L'attribut border-style peut être défini sur une valeur, deux valeurs, trois valeurs ou quatre valeurs. Leurs significations sont les suivantes :
1. border-style : pointillé solide double tiret
. signifie La bordure supérieure est en pointillés, la bordure droite est une ligne continue, la bordure inférieure est une ligne double et la bordure gauche est une ligne pointillée
2. style de bordure : double solide pointillé
signifie que la bordure supérieure est en pointillés , et les bordures droite et gauche sont une ligne continue, la bordure inférieure est une ligne double
3 border-style:dotted solid
signifie que les bordures supérieure et inférieure sont en pointillés et que les bordures droite et gauche sont pleines. lignes
4. border-style:dotted
signifie que les quatre bordures sont en pointillés
Méthode d'écriture de la bordure : border:border-width, border-style,border-color. Par conséquent, une ligne pointillée noire d'une largeur de 1px peut être écrite comme bordure : 1px dashed #000;
2. Exemples d'application de ligne pointillée CSS
1. Bordure en pointillé CSS
<style type="text/css">
div{border: 1px dashed #000;}
</style>
<body>
<div>生活不止眼前的苟且，还有诗和远方的田野</div>
</body>Rendu :
2. division de ligne, c'est-à-dire ligne pointillée CSS La bordure inférieure
est également souvent disposée à l'aide de balises CSS Li. Des lignes pointillées sont utilisées sous chaque ligne de li pour séparer le contenu, et border-bottom est utilisé. utilisé pour y parvenir.
<style type="text/css">
li{border-bottom: 1px dashed #000;}
</style>
<body>
<ul>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
</ul>
</body>Rendu :
3. CSS une ligne pointillée horizontale , utilisez la balise hr, puis ajoutez des styles à la balise hr , bordure : 1px pointillé #FF0000
<hr style="border: 1px dotted #FF0000;">
Rendu :
4. Lien hypertexte souligné en pointillé , utiliser la bordure - En bas : 1px en pointillés #FF0000, mettant l'accent sur le contenu de la balise a.
<style type="text/css">
a{text-decoration: none;border-bottom: 1px dashed #FF0000;}
</style>
<body>
<div>欢迎大家来<a href="#">PHP中文网</a>学习知识</div>
</body>Rendu :
Ce qui précède présente la méthode de production du style de ligne pointillée CSS, ainsi que les exemples d'application du style de ligne pointillée dans la page mise en page, amis Nous pouvons essayer plus de choses pratiques et essayer différents effets. J'espère que cet article pourra vous aider qui aime apprendre !
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!