Comment écrire une bordure en pointillés en utilisant CSS-tutoriel HTML-php.cn

Comment écrire une bordure en pointillés en utilisant CSS

php中世界最好的语言

Libérer： 2017-11-20 16:19:05

original

5103 Les gens l'ont consulté

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>

Copier après la connexion

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 :

J'ai une bordure en pointillés noirs à gauche

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 noirs

Ici, j'ai défini le côté droit pour qu'il soit une bordure en pointillés noirs

pour 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 :

<!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>

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!