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'>
<outline-color> =
auto |
[ <color> | <image-1D> ]
<outline-style> =
auto |
<outline-line-style>
<outline-width> =
<line-width>
<image-1D> =
<stripes()>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<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
设置为 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:
|
Animation type | as each of the properties of the shorthand:
|
浏览器兼容性
BCD tables only load in the browser