outline
CSS
shorthand property
set all the outline properties in a single declaration.
此特性是下列 CSS 特性的简写：
/* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* Global values */ outline: inherit; outline: initial; outline: unset;
outline
property may be specified using one, two, or three of the values listed below. The order of the values does not matter.
注意：
The outline will be invisible for many elements if its style is not defined. This is because the style defaults to
none
. A notable exception is
input
elements, which are given default styling by browsers.
<'outline-color'>
currentcolor
if absent. See
outline-color
.
<'outline-style'>
none
if absent. See
outline-style
.
<'outline-width'>
medium
if absent. See
outline-width
.
Borders and outlines are very similar. However, outlines differ from borders in the following ways:
As with all shorthand properties, any omitted sub-values will be set to their initial value .
Assigning
outline
a value of
0
or
none
will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.
WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
| 初始值 |
as each of the properties of the shorthand:
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 |
as each of the properties of the shorthand:
|
| 动画类型 |
as each of the properties of the shorthand:
|
[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
<a href="#">This link has a special focus style.</a>
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Basic User Interface Module Level 3
The definition of 'outline' in that specification. |
推荐 | 无变化。 |
|
CSS Level 2 (Revision 1)
The definition of 'outline' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
outline
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1.5
注意事项
|
IE 完整支持 8 | Opera 完整支持 7 | Safari 完整支持 1.2 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 3.1 | Samsung Internet Android 完整支持 1.0 |
完整支持
见实现注意事项。
要求使用供应商前缀或不同名称。