outline

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

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

border 和 outline

border 和 outline 很类似,但有如下区别:

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

语法

/* 样式 */
outline: solid;

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

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

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

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

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

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

取值

<'outline-width'>
设置轮廓的颜色。没有设置时默认值为 currentcolor。参见 outline-color
<'outline-style'>
设置轮廓的样式。没有设置时默认值为 none。参见 outline-style
<'outline-color'>
设置轮廓的宽度。没有设置时默认值为 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 会移除浏览器的默认聚焦样式。如果一个元素可交互,这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式,记得提供一个显眼的聚焦样式。

规范

规范 状态 注释
CSS Basic User Interface Module Level 3
outline
Recommendation No change.
CSS Level 2 (Revision 1)
outline
Recommendation Initial definition.
初始值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:

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
outlineChrome Full support 1Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Firefox includes absolutely positioned elements inside the outline (see bug 687311).
No support 1 — 3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 8Opera Full support 7Safari Full support 1.2WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.