---
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>

<pre class="syntaxbox notranslate">{{csssyntax("outline")}}</pre>

<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>