outline-offset
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.
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.
Exemple interactif
outline-offset: 4px;
outline-offset: 0.6rem;
outline-offset: 12px;
outline: 5px dashed blue;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
border: 2px solid crimson;
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntaxe
css
/* Valeurs de longueur */
/* Type <length> */
outline-offset: 3px;
outline-offset: 0.2em;
/* Valeurs globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
Valeurs
Définition formelle
| 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 |
Syntaxe formelle
outline-offset =
<length>
Exemples
CSS
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
html
<p class="exemple">La bordure est décalée</p>
Résultat
Spécifications
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-offset |
Compatibilité des navigateurs
Chargement…