outline-offset
La propriété outline-offset définit l'espace qu'il y a entre la bordure dessinée par outline et le bord de la boîte de bordure d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
/* Valeurs de longueur */
/* Type <length> */
outline-offset: 3px;
outline-offset: 0.2em;
/* Valeurs globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
Valeurs
<length>- La largeur de l'espace, voir la page
<length>pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.
Syntaxe formelle
Exemples
CSS
.exemple {
outline: 1px dashed red;
/* On décale la ligne de 10px */
outline-offset: 10px;
background: yellow;
margin: 15px;
border: 1px solid black;
}
HTML
<p class="exemple">La bordure est décalée<p>Résultat
Spécifications
| Spécification | Statut | Commentaires |
|---|---|---|
| CSS Transitions La définition de 'outline-offset' dans cette spécification. |
Version de travail | outline-offset peut désormais être animée. |
| CSS Basic User Interface Module Level 3 La définition de 'outline-offset' dans cette spécification. |
Recommendation | Définition initiale. |
| Valeur initiale | 0 |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une longueur |
Compatibilité des navigateurs
BCD tables only load in the browser