We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

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

<length>

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 proposée Définition initiale.

Valeur initiale0
Applicabilitétous les éléments
Héritéenon
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • interactive: Valeur introuvable dans la base de données
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 ?1.5 Non9.51.2
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? ? ? ? ? ?

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mrstork, fscholz, Sebastianz, teoli, Manumanu, FredB, Kyodev, Fredchat
Dernière mise à jour par : SphinxKnight,