CSS Décalage de contour
Décalage de contour CSS
La propriété outline-offset ajoute un espace entre un contour et le bord d'un élément. L'espace entre un élément et son contour est transparent.
L'exemple suivant spécifie un contour de 15px à l'extérieur du bord :
Ce paragraphe a une bordure noire et un contour rouge de 15px à l'extérieur du bord.
Exemple
p {
margin: 30px;
padding: 5px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
} L'exemple suivant montre que l'espace entre la bordure d'un élément et son contour est transparent :
Ce paragraphe a un contour de 15px à l'extérieur de la bordure.
Exemple
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
} Décalage de contour CSS avec valeur négative
L'exemple suivant montre l'utilisation d'un décalage de contour avec une valeur négative, ce qui place le contour à l'intérieur de la bordure :
Ce paragraphe a une bordure noire et un contour rouge de -5px à l'intérieur de la bordure.
Exemple
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: -5px;
} Toutes les propriétés de contour CSS
| Propriété | Description |
|---|---|
| outline | Une propriété abrégée pour définir outline-width, outline-style et outline-color en une seule déclaration |
| outline-color | Définit la couleur d'un contour |
| outline-offset | Spécifie l'espace entre un contour 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 |