轮廓 | outline

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

• 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; }

规范

浏览器兼容性