CSS中的outline属性详解

描述
outline（轮廓）是绘制在元素边框外围的一条可见线条，用于突出显示元素。与border不同，outline不占据空间（不影响布局），不会导致元素尺寸变化或触发重排，通常用于表示焦点状态或调试布局。

轮廓与边框的区别

1. 空间占用：outline不占空间，border会增加元素尺寸
2. 位置：outline始终在border外侧
3. 圆角：outline不继承border-radius的圆角效果
4. 边：outline是一个完整轮廓，不能单独设置各边

属性语法
outline是简写属性，包含以下三个子属性：

outline: [outline-width] [outline-style] [outline-color];

详细属性解析

1. outline-width - 轮廓宽度

   • 值：thin | medium | thick |
   • 示例：outline-width: 2px;

2. outline-style - 轮廓样式

   • 值：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
   • 必须设置style，否则轮廓不可见

3. outline-color - 轮廓颜色

   • 值： | invert
   • invert表示反转背景色（确保对比度）

焦点状态的应用
最常见的用途是表单元素的焦点指示：

input:focus {
  outline: 2px solid #4d90fe;
}

轮廓偏移
使用outline-offset属性控制轮廓与边框的间距：

button {
  border: 2px solid blue;
  outline: 2px solid red;
  outline-offset: 4px; /* 轮廓向外偏移4px */
}

实用技巧

1. 自定义焦点样式

button:focus {
  outline: 2px dashed #f06;
  outline-offset: 3px;
}

2. 临时调试布局

.debug * {
  outline: 1px solid red !important;
}

3. 移除默认轮廓（需谨慎）

button:focus {
  outline: none; /* 移除默认轮廓 */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* 提供替代视觉反馈 */
}

注意事项

• 移除outline时必须提供替代焦点指示，保证可访问性
• outline不会影响相邻元素的布局
• 在High Contrast模式下，系统会覆盖自定义outline样式