Maison > Article > interface Web > Méthodes DIV et CSS pour implémenter des bordures en pointillés CSS |
Méthodes DIV et CSS pour implémenter des bordures en pointillés CSS |
- 不言original
- 2018-06-28 13:44:433729parcourir
Cet article présente principalement les méthodes DIV et CSS pour implémenter les bordures en pointillés | Les soulignements en pointillés et les lignes pointillées CSS. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. 🎜>Ici, la ligne pointillée est contrôlée par la bordure en pointillés de l'attribut border
1. Ligne pointillée de bordure CSS - TOP
Ici, la ligne pointillée est contrôlée par la bordure en pointillés de l'attribut border. La hauteur CSS (hauteur CSS) et la largeur CSS (largeur CSS) définies ci-dessous sont de 350 pixels pour faciliter la visualisation de la démonstration.
1. Bordures en pointillés sur quatre côtés
border:1px dashed #000; 黑色虚线边框[code/]Code CSS :
[code].pcss5{border:1px dashed #000; height:50px;width:350px}La méthode d'abréviation de bordure est définie ici pour définir la bordure à quatre côtés du sélecteur pcss5 comme une bordure pointillée noire de 1 px
<p class="pcss5">我的四边为黑色虚线边框</p>
2. Le côté gauche est une ligne pointillée :
Code CSS :
Code html :.pcss5-1{border-left:1px dashed #000; height:50px;width:350px}<p class="pcss5-1">我的左边为黑色虚线边框</p>
3. Ligne pointillée sur le côté droit :
Code CSS :
Code HTML :.pcss5-2{border-right:1px dashed #000; height:50px;width:350px}<p class="pcss5-2">我的右边为黑色虚线边框</p>
4. Le bord supérieur (bord supérieur) est une ligne pointillée :
Code CSS :
.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}<p class="pcss5-3">我的上边为黑色虚线边框</p>
5. Le bord inférieur (bord inférieur) est une ligne pointillée :
Code CSS :
.pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}Le bord inférieur (bord inférieur) est défini ici Bord) Un côté est une bordure en pointillés noirs <p class="pcss5-4">我的下边为黑色虚线边框</p>
6. N'importe quel côté n'est pas une ligne pointillée, et les trois autres côtés sont des lignes pointillées
Ajoutez la bordure droite pour qu'elle ne soit pas une ligne pointillée mais pas de bord, et les trois autres côtés sont des bordures pointillées noires
CSS code :
Code HTML :.pcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}2. Lien hypertexte souligné en pointillés - TOP 我的右边边框无边线而其它三边为黑色虚线边框实例
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。 以上实例完整p+CSS代码如下：CSS 虚线 pCSS5实例说明www.pcss5.com www.pcss5.com css虚线实例实例我四边为虚线边框
<p class="pcss5-1">我的左边为黑色虚线边框</p> <p class="pcss5-2">我的右边为黑色虚线边框</p> <p class="pcss5-3">我的上边为黑色虚线边框</p> <p class="pcss5-4">我的下边为黑色虚线边框</p>我的右边边框无边线而其它三边为黑色虚线边框实例
Nous définissons souvent le lien Le contenu du texte soit a un lien et est souligné avec une ligne pointillée, ou la souris se déplace sur le texte avec le lien et un soulignement en pointillés apparaît. Comment y parvenir ? Ici, je vais vous présenter le soulignement en pointillés des hyperliens CSS.
1. Le texte lié est souligné en pointillés.
Ici, la propriété CSS border est également utilisée pour contrôler le style CSS du lien hypertexte vers un objet.
Code CSS de démonstration :
a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/Code CSS div complet : a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线下划线 pCSS5实例说明</title>
<style>
a{ border-bottom:1px dashed #111;text-decoration:none;}
a:hover{ border:0;}
</style>
</head>
<body>
欢迎到<a href="http://www.pcss5.com/">CSS教程网</a>的www.pcss5.com - pcss5学习CSS
</body>
</html>Ce qui précède est un soulignement en pointillés pour le texte avec des hyperliens CSS.
2. Un soulignement en pointillés apparaît lorsque la souris est placée sur le texte lié.
Ceci est très similaire à ce qui précède. Supprimez simplement le soulignement du lien hypertexte A et ajoutez une ligne pointillée sous le CSS. texte lorsque la souris passe dessus. Soulignez simplement la bordure. Le code CSS correspondant pour
est :
a{text-decoration:none;}
[/code]a:hover{border-bottom:1px dashed #111;} [/code]3. Soulignement en pointillés CSS de la liste - TOP
Souvent, lorsqu'ils rencontrent CSS LI, ils espèrent que le bas de chaque ligne de contenu dans ce style de liste CSS sera séparé par des lignes pointillées, comme indiqué. ci-dessous
Ici, il nous suffit de définir la bordure inférieure de LI sur une bordure en pointillé.
Tout d'abord, nous définissons le code CSS lors de l'initialisation du CSS :
li{border-bottom:1px dashed #111;} De plus, nous constatons souvent que la ligne pointillée au bas de li est aussi petite qu'un point et que la bordure est difficile à mettre en œuvre à ce stade, nous en avons besoin. une image en pointillés de la ligne pointillée (un côté est 1. Une image couleur de 1 pixel avec une largeur de pixel de 3 pixels peut être obtenue)
Code CSS li correspondant :
Li{background:url(点图片路径) repeat-x 0 bottom}4. CSS définit une ligne pointillée horizontale - TOP
Ceci est facile à comprendre et peut également être réalisé en définissant une ligne pointillée de bordure sur l'objet p. Vous pouvez également définir la ligne pointillée. attribut sur l’étiquette de la ligne horizontale hr. Ligne de séparation horizontale en pointillés.
Il peut être passé ici comme suit :
Définissez une ligne pointillée horizontale pour p :
Code HTML correspondant :.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}
<p class="pcss5"></p>
La première méthode consiste à définir l'attribut de ligne pointillée dans la balise hr :
<hr size=1 style="color: blue;border-style:dashed ;width:100%">
La deuxième méthode consiste à définir l'attribut css de hr en code css ou fichier CSS
hr {border-top:1px dashed #00F ; }
<hr size=1>
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Style CSS pour les images centrées verticalement dans des divs de largeur et de hauteur variablesTransition de transition en CSS3 Introduction à l'utilisation des attributs d'animation AnimationCe 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!