1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: outline-width
slug: Web/CSS/outline-width
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/outline-width
---
<div>{{CSSRef}}</div>
<p>La propriété CSS <strong><code>outline-width</code></strong> est utilisée afin de définir l'épaisseur de la bordure (<em>outline</em>) d'un élément. Cette bordure est dessinée autour des éléments et délimite <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a>. Visuellement, cela permet de faire ressortir l'élément.</p>
<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>thin</code></dt>
<dd>La 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 à <code>1px</code>.</dd>
<dt><code>medium</code></dt>
<dd>La 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 à <code>3px</code>.</dd>
<dt><code>thick</code></dt>
<dd>La 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 à <code>5px</code>.</dd>
<dt><code><length></code></dt>
<dd>Voir la page sur le type {{cssxref("<length>")}} pour les différentes valeurs correspondantes.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="deuxpixels">2px</span>
<span id="unex">1ex</span>
<span id="deuxem">2em</span>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', '100%', '80')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Aucun changement</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>outline-width</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.outline-width")}}</p>
|
