outline

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

尝试一下

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

border 和 outline

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

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

语法

css
/* 样式 */
outline: solid;

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

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

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

/* 全局值 */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

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

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

取值

<'outline-color'>

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

<'outline-style'>

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

<'outline-width'>

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

形式定义

初始值该简写所对应的每个属性：
适用元素所有元素
是否是继承属性否
计算值该简写所对应的每个属性：
  • outline-width: 绝对长度；如果指定关键词为 none，则计算值为 0
  • outline-style: as specified
  • outline-color: For the keyword auto, the computed value is currentcolor. 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 = 
  <'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>

示例

使用 outline 设置焦点样式

HTML

html
<a href="#">该链接具有特殊的焦点样式。</a>

CSS

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

浏览器兼容性

BCD tables only load in the browser