CSS轮廓

CSS轮廓是一种在元素周围绘制轮廓线的CSS属性。CSS轮廓通常与CSS边框一起使用，但与类似于CSS边框，CSS轮廓并不占用布局空间。

使用CSS轮廓

使用CSS轮廓属性指定元素的轮廓使用的颜色、宽度和线型。下面是使用CSS轮廓的示例：

/* 声明元素的轮廓颜色、宽度和线型 */
.element {
  outline: 2px solid blue;
}

上述代码将在.element元素周围绘制一个宽度为2px、颜色为蓝色、线型为实线的轮廓线。

CSS轮廓属性

下表列出了CSS轮廓属性及其描述：

| 属性 | 描述 | | :---------- | :--------------------------------------------------------------- | | outline | 设置元素的轮廓 | | outline-style | 设置轮廓的样式（可选值：none,dotted,dashed,solid,double,groove,ridge,inset,outset） | | outline-width | 设置轮廓的宽度（可选值：单个长度值如2px，也可以使用关键字thin,medium,thick） | | outline-color | 设置轮廓的颜色（可选值：颜色值如#000000，也可以使用CSS颜色关键字） |

示例

/* 定义元素的轮廓 */
.example {
  outline: 2px dashed red;
}

上述代码将在.example元素周围绘制一个宽度为2px、线型为虚线、颜色为红色的轮廓线。

CSS轮廓和CSS边框的区别

CSS轮廓和CSS边框在概念上很相似，但两者之间有一些区别：

• CSS轮廓不占据布局空间，而CSS边框占据布局空间。
• CSS轮廓可以在CSS样式表中为元素设置默认轮廓，而CSS边框必须在HTML中为元素设置。
• CSS轮廓可以针对可聚焦的元素（如输入字段）进行绘制，但CSS边框不会。

结论

CSS轮廓是一种很有用的CSS属性，可以在元素周围绘制轮廓线，即使页面中的其他元素位置发生改变也不会影响到元素的位置。同时，CSS轮廓可以帮助开发人员针对可聚焦元素对其进行样式化处理。