outline

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

规范

Specification
CSS Basic User Interface Module Level 4
# outline
初始值as each of the properties of the shorthand:
适用元素all elements
是否是继承属性否
计算值as each of the properties of the shorthand:
  • outline-color: For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • outline-width: an absolute length; if the keyword none is specified, the computed value is 0
  • outline-style: as specified
Animation typeas each of the properties of the shorthand:

浏览器兼容性

BCD tables only load in the browser