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:433709parcourir

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

Exemple :

border:1px dashed #000; 黑色虚线边框[code/]

Code CSS :

Code HTML :

[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}

Voici une bordure en pointillés noirs sur le côté gauche

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

Ici, le côté droit est défini comme une bordure en pointillés noirs

<p class="pcss5-2">我的右边为黑色虚线边框</p>

4. Le bord supérieur (bord supérieur) est une ligne pointillée :

Code CSS :

Code Html :

.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}

Voici le bord supérieur (ligne supérieure) avec une bordure en pointillés noirs sur un côté

<p class="pcss5-3">我的上边为黑色虚线边框</p>

5. Le bord inférieur (bord inférieur) est une ligne pointillée :

Code CSS :

Code HTML :

.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;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

Description : text-decoration : aucun ; Il s'agit de supprimer le soulignement CSS (l'attribut de soulignement par défaut fourni avec les hyperliens)

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

Voici comment cela fonctionne. Vous pouvez aussi bien essayer l'exemple de soulignement du lien hypertexte.

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 :

Ensuite, nous pouvons obtenir l'effet d'un contenu de type liste li séparé par des lignes pointillées comme indiqué ci-dessus (chaque contenu de li Le bas est une bordure en pointillés)

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 :

Nous ne le démontrerons pas en détail ici. Nous le présenterons également en détail dans VIP Démontrer les points de connaissance CSS de la création de divers li.

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;}

Définissez les attributs pour la ligne de séparation horizontale hr :

<p class="pcss5"></p>

La première méthode consiste à définir l'attribut de ligne pointillée dans la balise hr :

Ce qui est expliqué ici est la valeur de la taille hr, définie sur un côté, est juste 1.

<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

correspondant au code du titre hr en html :

hr {border-top:1px dashed #00F ; }

Voici comment définir la bordure de hr sur une bordure pointillée bleue de 1 pixel sur le bord supérieur ou inférieur. En même temps, définissez la taille de hr sur 1, ce qui est à peu près la même que la première. La seule différence est que lorsqu'elle apparaît en HTML. Si la balise hr est installée, l'attribut de balise hr est défini pour CSS. Si la page Web apparaît plusieurs fois, la quantité de code peut être réduite.

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

Transition de transition en CSS3 Introduction à l'utilisation des attributs d'animation Animation

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!

php css css3 html 对象选择器 border transition animation li

Déclaration：

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

Article précédent：Comment résoudre l'erreur d'accès direct au chemin de l'image de la page après l'empaquetage du webpackArticle suivant：Comment résoudre l'erreur d'accès direct au chemin de l'image de la page après l'empaquetage du webpack

Articles Liés

Voir plus