CSS Couleur de contour
Couleur de contour CSS
La propriété outline-color est utilisée pour définir la couleur du contour.
La couleur peut être définie de plusieurs manières :
- nom - spécifiez un nom de couleur, comme "rouge"
- HEX - spécifiez une valeur hexadécimale, comme "#ff0000"
- RGB - spécifiez une valeur RGB, comme "rgb(255,0,0)"
- HSL - spécifiez une valeur HSL, comme "hsl(0, 100%, 50%)"
- inverser - effectue une inversion de couleur (ce qui garantit que le contour est visible, quelle que soit la couleur de fond)
Exemples de couleur de contour CSS
Voici quelques contours différents avec des couleurs variées. Remarquez également que ces éléments ont une fine bordure noire à l'intérieur du contour :
Un contour rouge solide.
Un contour bleu en pointillé.
Un contour vert en relief.
Un contour solide inversé.
Exemple
Démonstration de différentes couleurs de contour :
p {
border: 1px solid black;
padding: 5px;
}
p.ex1 {
outline-style: solid;
outline-color: red;
}
p.ex2 {
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
outline-style: outset;
outline-color: green;
}
p.ex4 {
outline-style: solid;
outline-color: invert;
} Valeurs HEX
La couleur de contour peut également être spécifiée en utilisant une valeur hexadécimale (HEX) :
Exemple
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* rouge */
} Valeurs RGB
Ou en utilisant des valeurs RGB :
Exemple
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* rouge */
} Valeurs HSL
Vous pouvez également utiliser des valeurs HSL :
Exemple
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* rouge */
} Vous pouvez en apprendre davantage sur les valeurs HEX, RGB et HSL dans nos chapitres Couleurs CSS .