Oui, nous le savons : nous pouvons définir la largeur de la bordure. La largeur de la bordure peut être de 5 px, 10 px, 20 px ou n'importe quelle valeur.
Cependant, avez-vous déjà imaginé que vous pouviez définir une couleur distincte pour chaque bordure de 1 px ? Quelle est cette notion ? Autrement dit, si vous définissez une bordure de 10 px pour un élément, vous pouvez définir 10 couleurs pour cette zone de bordure de 10 px. Chaque 1px est un calque (groupe). DEMO : Explication détaillée de plusieurs ensembles de couleurs de bordure dans CSS3 border-colors
Eh bien, voyons comment définir la taille de la bordure des éléments (bloc de code 1) :
Le code ci-dessus indique que nous avons défini une bordure de 6 pixels pour un élément div avec className test. Bien sûr, il s'agit d'un rectangle à 4 côtés.
Par conséquent, ce code CSS peut en fait être affiné en (bloc de code 2) :
Grâce au code affiné, nous avons découvert que nous pouvons réellement définir des couleurs pour les quatre côtés du rectangle. Quant à savoir si les couleurs doivent être identiques ou différentes, cela dépend de vos propres besoins.
Lorsque vous exécutez le code affiné (vous pouvez bien sûr changer la couleur de chaque côté), vous voyez un rectangle avec une bordure noire de 6 pixels. Eh bien, c'est ce à quoi nous nous attendons.
Cependant, nous pouvons désormais diviser la bordure de 6 pixels en 6 groupes, chaque 1 px étant un groupe, chaque bordure peut donc être définie sur jusqu'à 6 couleurs différentes.
Comment faire ? Jetez un oeil (bloc de code trois):
.test{
largeur de bordure : 6 px ;
style de bordure : solide ;
border-top-colors :#000 #fff #999 #aaa #ccc #eee ;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
couleurs de bordure inférieure : #000 #fff #999 #aaa #ccc #eee ;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
.test{
largeur de bordure : 6 px ;
style de bordure : solide ;
couleur de la bordure supérieure : #000 ;
couleur de la bordure droite : #000 ;
couleur de la bordure inférieure : #000 ;
couleur de la bordure gauche : #000 ;
}
.test{
bordure : 6px solide #000 ;
}
<div class="test">Tester les paramètres de couleur des bordures</div>