files/zh-cn/web/css/outline/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
134
135

---
title: outline
slug: Web/CSS/outline
tags:
  - CSS
  - CSS属性
  - CSS轮廓
  - 参考
  - 布局
  - 轮廓
translation_of: Web/CSS/outline
---
<div>{{CSSRef}}</div>

<p><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> 的 <code>outline</code> 属性是在一条声明中设置多个轮廓属性的<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a> ， 例如 {{cssxref("outline-style")}}, {{cssxref("outline-width")}} 和 {{cssxref("outline-color")}}。 </p>

<p>{{EmbedInteractiveExample("pages/css/outline.html")}}</p>

<p>与其他简写属性一样，忽略的子属性会被设为 <a href="/zh-CN/docs/Web/CSS/initial_value">初始值</a>。</p>

<h3 id="border_和_outline">border 和 outline</h3>

<p><a href="/zh-CN/docs/Web/CSS/border">border</a> 和 outline 很类似，但有如下区别：</p>

<ul>
 <li>outline不占据空间，绘制于元素内容周围。</li>
 <li>根据规范，outline通常是矩形，但也可以是非矩形的。</li>
</ul>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="notranslate">/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;</pre>

<p><code>outline</code> 属性可使用以下一个、两个或三个值来声明，且顺序不重要。</p>

<div class="blockIndicator note">
<p><strong>注意：</strong>对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 <code>none</code>。但 <code>input</code> 元素是例外，其样式默认值由浏览器决定。</p>
</div>

<h3 id="Values" name="Values">取值</h3>

<dl>
 <dt><strong><code>&lt;'outline-color'&gt;</code></strong></dt>
 <dd>设置轮廓的颜色。没有设置时默认值为 <code>currentcolor</code>。参见 {{cssxref("outline-color")}}。</dd>
 <dt><code>&lt;'outline-style'&gt;</code></dt>
 <dd>设置轮廓的样式。没有设置时默认值为 <code>none</code>。参见 {{cssxref("outline-style")}}。</dd>
 <dt><code>&lt;'outline-width'&gt;</code></dt>
 <dd>设置轮廓的宽度。没有设置时默认值为 <code>medium</code>。参见 {{cssxref("outline-width")}}。</dd>
</dl>

<h3 id="形式语法">形式语法</h3>

{{csssyntax("outline")}}

<h2 id="Examples" name="Examples">示例</h2>

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

<pre class="notranslate">&lt;a href="#"&gt;This link has a special focus style.&lt;/a&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="notranslate">a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
</pre>

<h3 id="结果">结果</h3>

<h2 id="可访问性考虑">可访问性考虑</h2>

<p>将 <code>outline</code> 设置为 <code>0</code> 或 <code>none</code> 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。</p>

<ul>
 <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
 <li>
  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
 </li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

<h2 id="浏览器兼容性">浏览器兼容性</h2>

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