Maison > Article > interface Web > Comment écrire une bordure en pointillés en utilisant CSS
Comment écrire une bordure en pointillés en utilisant CSS
- php中世界最好的语言original
- 2017-11-20 16:19:055123parcourir
Aujourd'hui, je vais vous expliquer comment utiliser CSS pour utiliser différents styles de bordures pointillées DIV, de soulignements en pointillés et de listes pointillées, afin que vous n'ayez plus de difficulté avec les lignes pleines et pointillées ! Tout d’abord, examinons un DIV avec des bordures en pointillés sur les quatre côtés.
1. Bordures en pointillés sur quatre côtés
bordure : 1px en pointillés #000 ; bordure en pointillés noirs
Exemple :
CSS代码： .div{border:1px dashed #000; height:50px;width:350px}
Html代码： <div class="divcss5">我的四边为黑色虚线边框</div>Définissez l'abréviation de la bordure ici Définissez la bordure à quatre côtés du sélecteur div comme une bordure en pointillés noirs de 1px
2. Ligne pointillée à gauche :
Code CSS : .div{border-left:1px dashed #000; height:50px;width :350px>
Code HTML : 453a937ee1f418ba8e23fdffc6358aceJ'ai une bordure en pointillés noirs à gauche16b28748ea4df4d9c2150843fecfba68
Ici, j'ai défini un bordure en pointillés noirs sur le côté gauche
3. Ligne pointillée à droite :
Code CSS : .div2{border-right:1px dashed #000;
Code HTML : < ;div class="div2">Mon côté droit est une bordure en pointillés noirs16b28748ea4df4d9c2150843fecfba68
Ici, j'ai défini le côté droit pour qu'il soit une bordure en pointillés noirs
4. Le bord supérieur (bord supérieur) est une ligne pointillée :
Code CSS : .div3{border-top:1px dashed #000;
Code HTML : 678a046bebc5ee7951973d981586f38f Mon bord supérieur est une bordure en pointillés noirs16b28748ea4df4d9c2150843fecfba68Ici, je définis le bord supérieur (bord supérieur) et un côté est noir bordure pointillée5. Le bord inférieur (bord inférieur) est une ligne pointillée : Code CSS : .div4{border-bottom:1px dashed #000 ; :50px;width:350px>
Code HTML : 251bd083261c0ccdd7861727f6075d3bMon bas est une bordure en pointillés noirs16b28748ea4df4d9c2150843fecfba68Ici, je règle le bas (inférieur ligne) avec une bordure en pointillés noirs sur un côté6. Chaque côté n'est pas en pointillés,AutresTrois côtés sont des lignes pointillées
Ajoutez la bordure droite qui n'est pas en pointillés. mais pas de bord, et les trois autres côtés sont des bordures en pointillés noirsCode CSS : .div5{border:1px dashed # 000;border-right:0; height:50px;width:350px>Code HTML : 40a16365da51158de689c5c0315863f4Ma bordure droite n'a pas de bordure et les trois autres côtés sont des bordures en pointillés noirs 16b28748ea4df4d9c2150843fecfba68Ici, en définissant d'abord le objetpour avoir des bordures pointillées noires de 1px sur les quatre côtés, puis définir un côté sur 0, cela équivaut à définir 3 côtés Bordure pointillée attribut , mais faites attention à l'ordre avant et. après avoir défini les attributs de bordure ici. Le code DIV+CSS complet de l'exemple ci-dessus est le suivant :
Le tutoriel de la bordure pointillée DIV se termine ici. L'avez-vous appris ?<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 实例说明<title>www.php.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
</style>
</head>
<body>
www.php.cn虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>Lecture connexe :
Comment définir la couleur du texte du lien hypertexte en HTMLHTML définit la couleur de la police du lien hypertexte et la couleur de la police après un clic Résumer plusieurs codes HTML pour implémenter des hyperliensCe 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!