outline-width
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 juillet 2015.
La propriété CSS outline-width définit l'épaisseur du contour d'un élément. Un contour est une ligne tracée autour d'un élément, à l'extérieur de la border.
Exemple interactif
outline-width: 12px;
outline-width: thin;
outline-width: medium;
outline-width: thick;
<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 {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Il est souvent plus pratique d'utiliser la propriété raccourcie outline lors de la définition de l'apparence d'un contour.
Syntaxe
/* Valeurs avec un mot clé */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* Valeurs de type <length> */
outline-width: 1px;
outline-width: 0.1em;
/* Valeurs globales */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;
La propriété outline-width est définie avec une des valeurs listées ci-après.
Valeurs
<length>-
La largeur du contour définie en tant que
<length>. thin-
Dépend de l'agent utilisateur. Généralement équivalent à
1pxdans les navigateurs de bureau (y compris Firefox). medium-
Dépend de l'agent utilisateur. Généralement équivalent à
3pxdans les navigateurs de bureau (y compris Firefox). thick-
Dépend de l'agent utilisateur. Généralement équivalent à
5pxdans les navigateurs de bureau (y compris Firefox).
Définition formelle
| Valeur initiale | medium |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | une longueur absolue ; si le mot-clé none est défini, la valeur calculée sera 0 |
| Type d'animation | une longueur |
Syntaxe formelle
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Exemples
Définir la largeur du contour d'un élément
HTML
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
CSS
span {
outline-style: solid;
display: inline-block;
margin: 20px;
}
#thin {
outline-width: thin;
}
#medium {
outline-width: medium;
}
#thick {
outline-width: thick;
}
#twopixels {
outline-width: 2px;
}
#oneex {
outline-width: 1ex;
}
#em {
outline-width: 1.2em;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
outline - La propriété
outline-style - La propriété
outline-color