outline 用于设置元素的轮廓，是 outline-style （轮廓样式）、 outline-width （轮廓宽度）、 outline-color （轮廓颜色）的缩写。

$$tip

outline 与 border 的区别在于， outline 不占据空间，而 border 占据空间。 outline 不能设置单条边的样式，而 border 可以。

$$

轮廓样式

outline-style 用以设置轮廓的样式，有以下取值：

取值	效果	描述
none	<div style="width: 40px; height: 40px; outline: none 6px teal; background-color: pink;margin:6px;"></div>	默认值，没有边框。
solid	<div style="width: 40px; height: 40px; outline: solid 6px teal; background-color: pink;margin:6px;"></div>	实线。
dotted	<div style="width: 40px; height: 40px; outline: dotted 6px teal; background-color: pink;margin:6px;"></div>	圆点。
dashed	<div style="width: 40px; height: 40px; outline: dashed 6px teal; background-color: pink;margin:6px;"></div>	虚线。
double	<div style="width: 40px; height: 40px; outline: double 6px teal; background-color: pink;margin:6px;"></div>	双实线。
groove	<div style="width: 40px; height: 40px; outline: groove 6px teal; background-color: pink;margin:6px;"></div>	雕刻效果。
ridge	<div style="width: 40px; height: 40px; outline: ridge 6px teal; background-color: pink;margin:6px;"></div>	浮雕效果。
inset	<div style="width: 40px; height: 40px; outline: inset 6px teal; background-color: pink;margin:6px;"></div>	陷入效果。
outset	<div style="width: 40px; height: 40px; outline: outset 6px teal; background-color: pink;margin:6px;"></div>	突出效果。

轮廓宽度

outline-width 属性可以设置轮廓的宽度，有以下取值：

• 长度
• thin：细
• medium：中等
• thick：粗

轮廓颜色

outline-color 属性可以设置轮廓的颜色。