大纲

此属性是以下 CSS 属性的简写

• outline-width
• outline-style
• outline-color

/* style */
outline: solid;

/* style | color */
outline: dashed #f66;

/* width | style */
outline: thick inset;

/* width | style | color*/
outline: 3px solid green;

/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

可以使用下面列出的一个、两个或三个值来指定 outline 属性。值的顺序无关紧要。与所有简写属性一样，任何省略的子值都将设置为其 初始值。

<'outline-width'>

设置轮廓的厚度。如果不存在，则默认为 medium。请参阅 outline-width。

<'outline-style'>

设置轮廓的样式。如果不存在，则默认为 none。请参阅 outline-style。

<'outline-color'>

设置轮廓的颜色。对于支持它的浏览器，默认为 invert，对于其他浏览器，默认为 currentcolor。请参阅 outline-color。

轮廓是元素 边框 外部的线条。与盒子的其他区域不同，轮廓不占用空间，因此不会以任何方式影响文档的布局。

轮廓的外观受几个属性的影响。可以使用outline属性更改样式、颜色和宽度，使用outline-offset属性更改距边框的距离，并使用border-radius属性更改角的角度。

轮廓不需要是矩形的：在处理多行文本时，一些浏览器会为每一行框分别绘制轮廓，而另一些浏览器则会用单个轮廓包裹整个文本。

将outline的值设置为0或none将删除浏览器默认的焦点样式。如果元素可以交互，则必须具有可见的焦点指示器。如果删除了默认焦点样式，请提供明显的焦点样式。

• 如何设计有用且易用的焦点指示器
• WCAG 2.1：理解成功标准 2.4.7：焦点可见

outline = 
  <'outline-width'>  ||
  <'outline-style'>  ||
  <'outline-color'>  

<outline-width> = 
  <line-width>  

<outline-style> = 
  auto                  |
  <outline-line-style>  

<outline-color> = 
  auto                      |
  [ <color> | <image-1D> ]  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>  

HTML

<a href="#">This link has a special focus style.</a>

CSS

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

结果

• outline-width
• outline-style
• outline-color
• border