Création de lignes pointillées de page Web avec attribut de bordure en CSS

Cet article présente principalement la ligne pointillée (comment utiliser l'attribut border) dans la production CSS de pages Web. Les amis qui en ont besoin peuvent se référer à

La ligne pointillée de contrôle des frontières de l'attribut border ici. . La hauteur CSS et la largeur CSS configurées ci-dessous sont de 350 pixels.

1. Bordures en pointillés sur quatre côtés

bordure : 1px #000 en pointillés

Exemple :

Code CSS :

.hackhome{border:1px dashed #000; height:50px;width:350px}

Code HTML : J'ai une bordure en pointillés noirs sur quatre côtés

La forme abrégée de configuration de la bordure ici explique la bordure en pointillés noirs à quatre côtés du sélecteur hackhome de 1px

2 . Ligne pointillée à gauche :

Code CSS :

 .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

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

Ici je configure une bordure en pointillés noirs. sur le côté gauche

3. Ligne pointillée à droite :

Code CSS :

 .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

Code HTML : J'ai une bordure pointillée noire à droite

Ici je configure une bordure en pointillés noirs sur le côté droit

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

Code CSS :

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

Code HTML : Mon bord supérieur est une bordure en pointillés noirs

Configuré ici Le bord supérieur (bord supérieur) est une bordure en pointillés noirs

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

Code CSS :

.hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

Code HTML : Le mien Le bas est une bordure en pointillés noirs

Le bord inférieur (ligne inférieure) est configuré ici et un côté est une bordure en pointillés noirs

6. Si un côté n'est pas en pointillés, les trois autres côtés sont en pointillés

La bordure de droite n'est pas en pointillés mais n'a pas de bords, et les trois autres côtés sont des bordures en pointillés noirs

Code CSS :

 .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Code HTML : Ma bordure droite n'a pas de bordure et les trois autres côtés sont Exemple de bordure en pointillés noirs

Ici, l'objet est d'abord configuré avec des bordures en pointillés noirs de 1 px sur les quatre côtés, puis configuré avec un côté de 0. Cela équivaut à configurer l'attribut de bordure en pointillé sur 3 côtés, mais faites attention à la bordure ici L'ordre avant et après. configuration des attributs

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS L'attribut de transition implémente le widget d'applet WeChat avec affichage d'animation

Comment Webpack sépare le CSS et le conditionne séparément

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!