什么是“轮廓”？
在 CSS 中，轮廓（outline）是一个元素周围的一条线，可以用于强调元素或创建一个可见的区域。轮廓不占据空间，不会改变元素的大小或位置。
与边框不同的是，轮廓不会影响元素内部的布局或大小，因此可以将轮廓用于可点击的区域，而不影响元素的实际大小和位置。
使用 CSS 设置轮廓的属性
参考文献
CSS 轮廓属性（outline）是一个非常简单的属性，只有几个可选的参数。
outline-color: red;
outline-style: dotted;
outline-width: 3px;
以上代码设置轮廓的颜色为红色，样式为点状，宽度为 3 像素。
下面分别介绍轮廓的三个属性：
1. 轮廓颜色（outline-color）
轮廓颜色属性可以用颜色名称、十六进制值、RGB 值等值来指定轮廓的颜色。
示例：
outline-color: red; /*使用颜色值*/
outline-color: #000000; /*使用十六进制值*/
outline-color: rgb(0, 0, 0); /*使用 RGB 值*/
2. 轮廓样式（outline-style）
轮廓样式属性可以用多种值来指定轮廓的类型，如实线、虚线、双实线、点状等。
示例：
outline-style: solid; /*实线*/
outline-style: dashed; /*虚线*/
outline-style: double; /*双实线*/
outline-style: dotted; /*点状*/
3. 轮廓宽度（outline-width）
轮廓宽度属性可以用像素、em、百分比等单位来指定轮廓的宽度。
示例：
outline-width: 2px; /*像素*/
outline-width: 0.5em; /*em*/
outline-width: 50%; /*百分比*/
注意： 如果只想设置轮廓的某个属性，而其他属性保持不变，可以单独使用轮廓颜色或轮廓宽度等。
使用 CSS 建立元素轮廓
创建轮廓的最基本方式是为元素添加 outline 属性并设置其可以使用的参数之一（如上述的颜色、样式和宽度）。
示例：
/*添加轮廓*/
.example {
outline: 2px solid red;
}
上述代码通过 solid 样式设置一个红色实线轮廓，样式宽度都设置为 2 像素。
关于轮廓的注意事项
在使用 outline 属性时应该注意以下一些细节：
轮廓不占据空间，这意味着 outline 的宽度不会影响元素的大小。
默认情况下，轮廓在元素的外部，随着元素的大小或形状变化而变化，也就是说，轮廓的宽度不会加在元素的内部。
轮廓可以用于tabindex，轮廓可以创建一个可点击的区域。
轮廓与边框不同。
总结
CSS 中的轮廓属性是一个非常简单但有用的技术。 可以使用轮廓属性为元素提供视觉强调。与边框不同的是，轮廓不影响元素内部的布局或大小，可以将轮廓用于可点击的区域，而不影响元素的实际大小和位置。应该注意的是，轮廓不占据空间，而且与边框不同。