CSS outline 属性

在网页开发中，outline 属性用于设置元素的轮廓样式。它通常用于在元素获取焦点时显示一个轮廓，提高用户体验。

语法

outline: outline-color outline-style outline-width;

• outline-color：指定轮廓的颜色。可以使用颜色值、关键字或者 RGB 值。
• outline-style：指定轮廓的样式，如实线、虚线等。
• outline-width：指定轮廓的宽度，可以使用像素值、百分比等。

取值

outline-color

• <color>：指定一个颜色值，比如 red、#ff0000。
• invert：指定为与元素背景颜色相反的颜色。

outline-style

• none：不显示轮廓。
• dotted：显示为点线轮廓。
• dashed：显示为虚线轮廓。
• solid：显示为实线轮廓。
• double：显示为双线轮廓。

outline-width

• <length>：指定轮廓的宽度，比如 1px、2em。
• thin：指定为细线轮廓。
• medium：指定为中等宽度的轮廓。
• thick：指定为粗线轮廓。

示例

.btn {
  outline: 2px solid blue;
}

.btn:focus {
  outline: 2px dotted red;
}

在上面的示例中，.btn 类的元素在正常状态下显示为蓝色的实线轮廓，当获取焦点时显示为红色的点线轮廓。

注意事项

• 在一些浏览器中，outline 不会占用空间，不会影响页面布局。
• outline 不支持圆角、阴影等效果，如果需要更多样式，可以考虑使用 box-shadow 属性。