CSS outline 属性（轮廓属性）

CSS outline 属性（轮廓属性）

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width（颜色、样式、宽度）

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

{
outline:#00FF00 dotted thick;
}

例子：

{
border:1px solid red;
outline:green dotted thick;
}

边框：宽度一像素，实线，红色

轮廓：绿色，点状虚线，宽度粗

CSS outline-color 属性（轮廓颜色）

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-color属性指定轮廓颜色。

注意： 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

CSS outline-style 属性（轮廓样式）

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-style属性指定outline的样式。

实线边框 {border:1px solid red;}
点线轮廓 {outline-style:dotted;}
虚线轮廓 {outline-style:dashed;}
实线轮廓 {outline-style:solid;}
双线轮廓 {outline-style:double;}
凹槽轮廓 {outline-style:groove;}
垄状轮廓 {outline-style:ridge;}
嵌入轮廓 {outline-style:inset;}
外凸轮廓 {outline-style:outset;}

提示和注释

outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

CSS outline-width 属性（轮廓宽度）

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。

outline-width指定轮廓的宽度。

注意： 请始终在outline-width属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

例子：

细实线轮廓

{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}

点线5像素轮廓

{
border:1px solid red;
outline-style:dotted;
outline-width:5px;
}