什么是CSS轮廓宽度属性？
CSS轮廓属性定义了一个元素的轮廓（outline）以及轮廓的宽度（outline-width）、样式（outline-style）和颜色（outline-color）。
CSS轮廓属性不会占据空间，但是可以在边框之外绘制，通常用于给元素增加视觉效果、指示元素聚焦状态或者用于制作特殊的UI控件。
CSS轮廓属性是CSS2.1规范中新增的属性，支持大多数主流浏览器，但在IE6及以下版本不支持。
轮廓宽度属性的使用方法
轮廓宽度属性可以设置成一个CSS长度单位，也可以使用预定义的关键字，包括以下几个：
thin：细的轮廓
medium：中等的轮廓
thick：粗的轮廓
设置轮廓宽度的长度单位
可以使用具体的长度单位来设置轮廓的宽度，例如：px、em、rem等。
/* 设置轮廓宽度为5个像素 */
outline-width: 5px;
/* 设置轮廓宽度为2em */
outline-width: 2em;
需要注意的是，轮廓线条的宽度不会影响轮廓占据的空间，也就是说，轮廓线条不会影响到元素的尺寸和布局。
使用预定义关键字
可以使用以下预定义的关键字来设置轮廓宽度：
/* 设置轮廓宽度为默认值，即'medium' */
outline-width: medium;
/* 设置轮廓宽度为细型 */
outline-width: thin;
/* 设置轮廓宽度为粗型 */
outline-width: thick;
轮廓线条的样式和颜色
CSS轮廓属性还有两个相关的属性，分别是轮廓线条的样式和颜色。
轮廓线条的样式
可以使用以下几个预定义的样式，来设置轮廓线条的样式：
none：不显示轮廓线条
hidden：隐藏轮廓线条
dotted：点状样式的轮廓线条
dashed：虚线状样式的轮廓线条
solid：实线状样式的轮廓线条
double：双线状样式的轮廓线条
groove：3D沟槽式样式的轮廓线条
ridge：3D脊状式样式的轮廓线条
inset：3D凹陷式样式的轮廓线条
outset：3D凸出式样式的轮廓线条
/* 设置点状的轮廓线条 */
outline-style: dotted;
/* 设置实线状的轮廓线条 */
outline-style: solid;
轮廓线条的颜色
可以使用预定义的颜色名称，或者使用十六进制颜色值、RGB颜色值来设置轮廓线条的颜色。
/* 设置轮廓线条的颜色为红色 */
outline-color: red;
/* 设置轮廓线条的颜色为黑色 */
outline-color: #000000;
/* 设置轮廓线条的颜色为深绿色 */
outline-color: rgb(0, 128, 0);
需要注意的是，轮廓线条默认采用与文本相同的颜色。
示例代码
下面是一个使用CSS轮廓属性实现的示例代码：
/* 设置轮廓宽度大小，样式和颜色 */
outline-width: 5px;
outline-style: solid;
outline-color: red;
/* 聚焦状态时的轮廓 */
:focus {
outline: 2px dashed blue;
}
上面的代码中，outline-width设置了轮廓的宽度为5个像素，outline-style设置了轮廓的样式为实线，outline-color设置了轮廓的颜色为红色。在元素聚焦状态时，用:focus伪类选择器将轮廓的大小、样式和颜色设置为虚线状的浅蓝色。
总结
CSS轮廓属性是一个非常实用的属性，可以用于创建具有特殊效果的UI控件，也可以用于指示元素的聚焦状态。轮廓宽度属性是其最基础的属性之一，可以使用具体的长度单位、预定义的关键字来设置；轮廓线条的样式和颜色则可以使用对应的预定义值进行设置。通过合理使用CSS轮廓属性，可以让Web页面的UI效果更加丰富多彩。