--- 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><'outline-color'></code></strong></dt> <dd>设置轮廓的颜色。没有设置时默认值为 <code>currentcolor</code>。参见 {{cssxref("outline-color")}}。</dd> <dt><code><'outline-style'></code></dt> <dd>设置轮廓的样式。没有设置时默认值为 <code>none</code>。参见 {{cssxref("outline-style")}}。</dd> <dt><code><'outline-width'></code></dt> <dd>设置轮廓的宽度。没有设置时默认值为 <code>medium</code>。参见 {{cssxref("outline-width")}}。</dd> </dl> <h3 id="形式语法">形式语法</h3> <pre class="syntaxbox notranslate">{{csssyntax("outline")}}</pre> <h2 id="Examples" name="Examples">示例</h2> <h3 id="HTML">HTML</h3> <pre class="notranslate"><a href="#">This link has a special focus style.</a> </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>