files/zh-cn/web/css/outline-width/index.html


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
translation_of: Web/CSS/outline-width
---
<div>{{CSSRef}}</div>

<p>CSS 属性 <strong><code>outline-width</code></strong> 用于设置一个元素的轮廓的厚度。元素轮廓是绘制于元素周围的一条线，位于 {{cssxref("border")}} 的外围。</p>

<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>


<p>大多情况下用简写属性 {{cssxref("outline")}} 定义轮廓外观会更方便。</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css no-line-numbers">/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* &lt;length&gt; values */
outline-width: 1px;
outline-width: 0.1em;

/* Global values */
outline-width: inherit;
</pre>

<p><code>outline-width</code> 的值可以是下面列表中的任一项。</p>

<h3 id="Values">Values</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>The width of the outline specified as a <code>&lt;length&gt;</code>.</dd>
 <dt><code>thin</code></dt>
 <dd>取决于用户代理。通常等同于桌面浏览器的 <code>1px</code> （包括 Firefox）。</dd>
 <dt><code>medium</code></dt>
 <dd>取决于用户代理。通常等同于桌面浏览器的 <code>3px</code> （包括 Firefox）。</dd>
 <dt><code>thick</code></dt>
 <dd>取决于用户代理。通常等同于桌面浏览器的 <code>5px</code>（包括 Firefox）。</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="Examples">Examples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;span id="thin"&gt;thin&lt;/span&gt;
&lt;span id="medium"&gt;medium&lt;/span&gt;
&lt;span id="thick"&gt;thick&lt;/span&gt;
&lt;span id="twopixels"&gt;2px&lt;/span&gt;
&lt;span id="oneex"&gt;1ex&lt;/span&gt;
&lt;span id="em"&gt;1.2em&lt;/span&gt;
</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;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

</pre>

<p>{{EmbedLiveSample('Examples', '100%', '80')}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>outline-width</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>


<p>{{Compat("css.properties.outline-width")}}</p>