Comment ajouter une double bordure avec des couleurs différentes ?
Pour ajouter une double bordure sur n'importe quelle forme à l'aide de CSS, le ' :avant ” Le sélecteur est célèbre. Il change les couleurs des deux bordures pour les rendre uniques. La procédure pas à pas fournie ci-dessous pour ajouter une double bordure avec des couleurs différentes :
Étape 1 : Ajouter un élément Div et attribuer des classes
Dans le fichier HTML, ajoutez l'élément div à l'intérieur de la balise
et attribuez un ' classe ' avec le nom de ' double bordure ”. Les utilisateurs peuvent également créer leur propre nom de classe :< div classe = 'double frontière' >
< / div >
Étape 2 : créer une balise de style
Dans cette étape, créez une portion pour la classe ' double bordure ' et faites-en une copie avec le ' :avant ” sélecteur. De cette façon, les propriétés CSS seront appliquées à nos classes :
< style >
.double- frontière {
}
.double- frontière :avant {
}
< / style >
Étape 3 : Ajouter des styles à la classe
Les propriétés CSS s'appliquent à l'élément div qui a une classe de ' double bordure ”. Les styles suivants sont mentionnés ci-dessous :
.double- frontière {
arrière-plan- couleur : #ccc;
frontière : 4px vert uni ;
rembourrage : 50px ;
largeur : 16 pixels ;
hauteur : 16 pixels ;
position : relative ;
marge: 0 auto;
}
La description des propriétés CSS est donnée ci-dessous :
- Tout d'abord, ajoutez ' Couleur de l'arrière plan ' qui est gris et le ' frontière ” de poids 4px et de couleur verte.
- Le ' rembourrage ” de 50px pour créer l'espace intérieur de 50px de tous les côtés.
- Au final, le « largeur ' et ' hauteur' de 16px. Également ' marge ” est 0 auto, ce qui signifie que les marges supérieure et inférieure seront égales à zéro et à gauche.
La page Web ressemble à ceci :
La sortie affiche que la bordure est appliquée à 'div'.
Étape 4 : Ajout du sélecteur CSS
Maintenant, déplacez-vous vers la deuxième case dans la balise de style qui a le ' :avant ” Sélecteur ci-joint, et écrivez le code ci-dessous :
.double- frontière :avant {arrière-plan : aucun;
frontière : 4px bleu uni ;
contenu : '' ;
position : absolue ;
haut : 4 pixels ;
gauche : 4px ;
droite : 4px ;
bas : 4 px ;
}
Les propriétés sont expliquées ci-dessous :
- Utilisez le ' position ” propriété pour fixer la position d'un élément.
- Après cela, le « haut, gauche, droite et bas ” définit la marge de l'élément nouvellement créé par rapport à l'original.
- Un sélecteur CSS appelé ' : avant ” ajoute du contenu devant un élément choisi.
La sortie ressemble à :
C'est ainsi qu'une double bordure peut être ajoutée en utilisant différentes couleurs.
Conclusion
Pour ajouter une double bordure, créez d'abord un élément div et affectez-le à une classe. Ensuite, ajoutez le CSS ' position ” propriété qui doit être définie sur relative. Ensuite, ajoutez-y le sélecteur CSS ':before' afin que les utilisateurs puissent ajouter du contenu avant un élément choisi. Ce guide a démontré l'utilisation de bordures doubles avec différentes couleurs.