outline - CSS（层叠样式表） 编辑

CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color。 

与其他简写属性一样，忽略的子属性会被设为 初始值。

border 和 outline

border 和 outline 很类似，但有如下区别：

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

语法

/* 样式 */
outline: solid;

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

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

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

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;

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

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

取值

<'outline-color'>

设置轮廓的颜色。没有设置时默认值为 currentcolor。参见 outline-color。

<'outline-style'>

设置轮廓的样式。没有设置时默认值为 none。参见 outline-style。

<'outline-width'>

设置轮廓的宽度。没有设置时默认值为 medium。参见 outline-width。

形式语法

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

示例

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

• How to Design Useful and Usable Focus Indicators

• WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible

规范

浏览器兼容性

BCD tables only load in the browser