Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
outline-width
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 juillet 2015.
La propriété CSSoutline-width est utilisée afin de définir l'épaisseur de la bordure (outline) d'un élément. Cette bordure est dessinée autour des éléments et délimitela boîte de bordure. Visuellement, cela permet de faire ressortir l'élément.
Exemple interactif
outline-width: 12px;outline-width: thin;outline-width: medium;outline-width: thick;<section> <div> This is a box with an outline around it. </div></section>#example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}Syntaxe
/* Valeurs avec un mot clé */outline-width: thin;outline-width: medium;outline-width: thick;/* Valeurs de longueur *//* Type <length> */outline-width: 1px;outline-width: 0.1em;/* Valeurs globales */outline-width: inherit;Valeurs
thinLa largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à
1px.mediumLa largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à
3px.thickLa largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à
5px.<length>Voir la page sur le type
<length>pour les différentes valeurs correspondantes.
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 sera0 |
| Type d'animation | unelongueur |
Syntaxe formelle
outline-width =
<line-width>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
Exemples
HTML
<span>thin</span><span>medium</span><span>thick</span><span>2px</span><span>1ex</span><span>2em</span>CSS
span { outline-style: solid; display: inline-block; margin: 20px;}#thin { outline-width: thin;}#medium { outline-width: medium;}#thick { outline-width: thick;}#deuxpixels { outline-width: 2px;}#unex { outline-width: 1ex;}#deuxem { outline-width: 2em;}Résultat
Spécifications
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |