-moz-outline
-moz-outline
outline
CSS属性是设置一个或多个单独的轮廓属性的简写属性,outline-style
,outline-width
以及outline-color
在一个单一的声明中。
/* width | style | color */
outline: 1px solid white;
/* Global values */
outline: inherit;
outline: initial;
outline: unset;
大纲在以下方面与边界不同:
- 大纲不占用空间,它们被绘制在元素的内容之外。
- 轮廓可能是非矩形的。它们在Gecko / Firefox中是矩形的,但是Opera例如在这样的结构周围画一个非矩形的形状:
TEXTTEXTEXT
初始值 | as each of the properties of the shorthand: outline-color: invert, for browsers supporting it, currentColor for the other outline-style: none outline-width: medium |
---|---|
适用元素 | all elements |
是否是继承属性 | no |
适用媒体 | visual, interactive |
计算值 | 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 |
动画类型 | as each of the properties of the shorthand: outline-color: a color outline-width: a length outline-style: discrete |
正规顺序 | order of appearance in the formal grammar of the values |
outline-color
:invert
,对于支持它的浏览器,另一个为currentColor
outline-style
:none
outline-width
:medium
Applies to all elements [Inherited](inheritance) no Media visual, interactive [Computed value](computed_value) as each of the properties of the shorthand:
outline-color
:关键字invert
,计算值为invert
。对于颜色值,如果该值是半透明的,则计算值将与rgba()
是对应的。如果不是,则rgb()
是对应的。transparent
关键字映射到rgba(0,0,0,0)
。
outline-width
:绝对长度;如果关键字为none
,则计算值为0
。
outline-style
:具体规定
Animation type as each of the properties of the shorthand:
outline-color
:颜色
outline-width
:长度
outline-style
:离散
Canonical order order of appearance in the formal grammar of the values
语法
outline
属性被指定为下面列表中的一个,两个或三个值。值的顺序无关紧要。
值
outline-width
设置轮廓的宽度。
正式语法
[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
示例
轮廓:实心;轮廓:虚红色;轮廓:点状1 px;轮廓:脊厚紫罗兰;轮廓:自定义5 px;
/* Two identical declarations */
:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }
规范
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3The definition of 'outline' in that specification. | Candidate Recommendation | No change. |
CSS Level 2 (Revision 1)The definition of 'outline' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.5 (1.8)1 | 8.0 | 7.0 | 1.2 (125) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.8) 1 | 8.0 | 6.0 | 3.1 |