outline-offset
Baseline
Large disponibilité
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é CSS outline-offset définit l'espace entre un contour et le bord ou la bordure d'un élément.
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">
Ceci est une boîte avec un contour autour.
</div>
</section>
#example-element {
border: 2px solid crimson;
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntaxe
css
/* Valeurs de type <length> */
outline-offset: 3px;
outline-offset: 0.2em;
/* Valeurs globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;
Valeurs
<length>-
La largeur de l'espace entre l'élément et son contour. Une valeur négative place le contour à l'intérieur de l'élément. Une valeur de
0place le contour de manière à ce qu'il n'y ait pas d'espace entre lui et l'élément.
Description
Un contour est une ligne tracée autour d'un élément, à l'extérieur du bord de la bordure. L'espace entre un élément et son contour est transparent. En d'autres termes, il est identique à l'arrière-plan de l'élément parent.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme défini, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une longueur |
Syntaxe formelle
outline-offset =
<length>
Exemples
Définir un décalage de contour en pixels
HTML
html
<p>Gallia est omnis divisa in partes tres.</p>
CSS
css
p {
outline: 1px dashed red;
outline-offset: 10px;
background: yellow;
border: 1px solid blue;
margin: 15px;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Basic User Interface Module Level 4 # outline-offset |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
outline - La propriété
outline-width - La propriété
outline-style - La propriété
outline-color