CSS 轮廓（outline）

在 CSS 中，轮廓（outline）是一种在元素周围绘制的线条，通常用于突出显示元素的边框。轮廓与边框类似，但是不影响元素的布局。

设置轮廓

要设置元素的轮廓，可以使用 outline 属性。该属性可以接受以下几种值：

• outline-width：轮廓的宽度，默认为 medium
• outline-style：轮廓的样式，例如 dotted、dashed、solid、double 等
• outline-color：轮廓的颜色，默认为当前元素的文本颜色

示例代码：

.element {
  outline: 2px solid red;
}

在上面的示例中，我们为 .element 元素设置了一个 2 像素宽、红色实线样式的轮廓。

调整轮廓偏移

有时候我们希望轮廓不要与元素的边框重叠，可以使用 outline-offset 属性来调整轮廓的偏移量。

示例代码：

.element {
  outline: 2px solid blue;
  outline-offset: 10px;
}

在上面的示例中，我们为 .element 元素设置了一个 2 像素宽、蓝色实线样式的轮廓，并将轮廓偏移量设置为 10 像素。

轮廓的兼容性

需要注意的是，不同浏览器对于轮廓的支持程度可能有所不同。在一些旧版本的浏览器中，可能无法正确显示轮廓样式或偏移量。因此，在使用轮廓时，建议进行兼容性测试。

以上就是关于 CSS 轮廓的介绍，希望能帮助你更好地掌握这一特性。