Partagez l'exemple de code pour ajouter un style de bordure à un div

Comment ajouter un style de bordure à un div ?

Il est très simple d'ajouter un style de bordure à la boîte div, il suffit d'utiliser le style de plaque de bordure.

1. Bordures pointillées et pleines - TOP

Style de bordure en pointillé : pointillé
Style d'implémentation de la bordure : solide

border:1px dashed #000

signifie définir la largeur de la bordure de l'objet sur 1px La bordure en pointillés noirs

border:1px solid #000

signifie définir la largeur de la bordure de l'objet à 1px pour obtenir une bordure noire

2. Ajoutez une bordure en haut de le div - TOP

Nous ajoutons une bordure noire de 1px en haut du div

div{border-top:1px solid #000}

3. Ajoutez une bordure en bas du div - TOP

Ajoutez une bordure rouge en pointillés de 2 pixels au bas de la boîte div

div{border-bottom:2px dashed #F00}

4. Ajoutez une bordure sur le côté gauche de la boîte div - TOP

Donnez un nom CSS de sélecteur CSS ". .divcss5" et ajoutez une bordure bleue pleine de 1 px sur le côté gauche de la boîte

.divcss5{ border-left:1px solid #00F}

Code DIV :

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>

5. Ajoutez une bordure sur le côté droit de la boîte div - TOP

Ajoutez une bordure solide rouge de 1 px sur le côté droit de l'objet div

div{ border-right:1px solid #F00}

6, Ajoutez des bordures en haut et en bas de la boîte - TOP

Ajoutez 1px en haut et en bas de la boîte pour obtenir une bordure noire

div{border-top:1px solid #000;border-bottom:1px solid #000}

7. Ajoutez des bordures sur les côtés gauche et droit de la boîte div - TOP

Ajouter des bordures sur les côtés gauche et droit de la boîte Ajoutez une bordure verte en pointillé de 2px

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}

8. Ajoutez une bordure aux quatre côtés du div - TOP

Ajoutez 3px aux quatre côtés de un DIV pour réaliser une bordure noire

div{ border:3px solid #000}

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!