轮廓 | outline
CSS的outline属性是用来设置一个或多个单独的轮廓属性的简写属性?， 例如?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 |
Animation type | 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-style设置轮廓的样式。outline-color设置轮廓的颜色。由于Gecko 1.9（Firefox 3），元素color属性（前景色）的值被用作默认值。
正式语法
[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]示例
outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;
/* 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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
