Propriétés CSS Outline
Un contour est une ligne tracée autour d'un élément - en dehors de la frontière. Cela peut être utiliser pour faire un élément "stand out" .
Les CSS outline les propriétés spécifient le style, la couleur, et la largeur d'un contour.
Cet élément a une frontière mince noir et un double contour qui est 10px large et vert.
CSS Outline
Un outline est une ligne qui est dessinée autour des éléments ( en dehors des frontières) pour rendre l'élément "stand out" .
Cependant, l' outline des biens est différente de la propriété border - Le outline est pas une partie des dimensions d'un élément; la largeur et la hauteur totale de l'élément ne sont pas affectées par la largeur du contour.
Outline style
Le outline-style propriété spécifie le style du contour.
Le outline-style propriété peut avoir l' une des valeurs suivantes:
-
dotted- Définit un contour en pointillé - en
dashed- Définit un contour en pointillés -
solid- Définit un contour solide -
double- Définit un double contour -
groove- Définit un contour rainuré 3D. L'effet dépend de la valeur outline-color -
ridge- Définit un contour striée 3D. L'effet dépend de la valeur outline-color -
inset- Définit un contour d'encart 3D. L'effet dépend de la valeur outline-color -
outset- Définit un départ aperçu 3D. L'effet dépend de la valeur outline-color -
none- Définit aucun contour -
hidden- Définit un contour caché
L'exemple suivant définit d' abord une fine bordure noire autour de chaque <p> élément, puis il montre les différentes outline-style valeurs:
Exemple
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Résultat:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Essayez - le vous - même »  | Remarque: Aucun des autres propriétés CSS de contour décrites ci - dessous aura un effet à moins que le outline-style propriété est définie! |
|---|
Contour Couleur
Le outline-color propriété est utilisée pour définir la couleur du contour.
La couleur peut être définie par:
- nom - spécifier un nom de couleur, comme "red"
- RGB - spécifier une valeur RGB, comme "rgb(255,0,0)"
- Hex - spécifier une valeur hexadécimale, comme "#ff0000"
- inverti - effectue une inversion des couleurs (ce qui garantit que le contour est visible, indépendamment de la couleur de fond)
Exemple
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Résultat:
A colored outline.
Outline Largeur
L' outline-width propriété spécifie la largeur du contour.
La largeur peut être définie comme une taille spécifique (en px, pt, cm, em , etc) ou en utilisant l' une des trois valeurs prédéfinies: mince, moyenne ou épaisse.
Exemple
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Résultat:
A thick outline.
A thinner outline.
Outline - propriété Shorthand
Pour raccourcir le code, il est également possible de spécifier toutes les propriétés de contour individuelles dans une propriété.
Le outline propriété est un raccourci pour les propriétés de contour individuelles suivantes:
-
outline-width -
outline-style(obligatoire) -
outline-color
Exemple
p {
border: 1px solid black;
outline: 5px dotted red;
}Résultat:
An outline.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 »
Toutes les propriétés CSS Outline
| Propriété | La description |
|---|---|
| outline | Définit toutes les propriétés de contour dans une déclaration |
| outline-color | Définit la couleur d'un contour |
| outline-offset | Indique l'espace entre les grandes lignes et le bord ou la bordure d'un élément |
| outline-style | Définit le style d'un contour |
| outline-width | Définit la largeur d'un contour |