CSS 轮廓
03-css2026/11/14
CSS 轮廓（Outline）是一个经常被忽视但非常有用的属性。轮廓看起来像边框，但在行为和用途上有重要区别。
什么是 CSS 轮廓（outline）？
outline 是绘制在元素外侧的一条线，不占空间。
使用场景：输入框聚焦、按钮聚焦、调试元素边界。
| 属性 | 是否占空间 | 位置 | 是否影响布局 |
|---|---|---|---|
| border | ✔ 占空间 | 在 padding 外、margin 内 | ✔ 影响布局 |
| outline | ✖ 不占空间 | 在 border 外（不挤占布局） | ✖ 不影响布局 |
轮廓的基本属性
1. outline-width - 轮廓宽度
设置轮廓线的粗细。
button {
outline-width: 2px; /* 固定值 */
outline-width: thin; /* 细线 */
outline-width: medium; /* 中等（默认）*/
outline-width: thick; /* 粗线 */
}
2. outline-style - 轮廓样式
设置轮廓线的样式。
input {
outline-style: solid; /* 实线 */
outline-style: dashed; /* 虚线 */
outline-style: dotted; /* 点线 */
outline-style: double; /* 双实线 */
outline-style: groove; /* 3D凹槽 */
outline-style: none; /* 无轮廓（谨慎使用！）*/
}
3. outline-color - 轮廓颜色
设置轮廓线的颜色。
a {
outline-color: red;
outline-color: #ff0000;
outline-color: invert; /* 颜色反转（确保对比度）*/
}
4. outline-offset - 轮廓偏移
设置轮廓与元素边框之间的间距
button {
border: 2px solid #333;
outline: 2px solid #3498db;
outline-offset: 4px; /* 轮廓向外偏移4px */
}
img:focus {
outline: 3px dotted #e74c3c;
outline-offset: -6px; /* 轮廓向内偏移6px */
}
5. ·:focus-visible· - 智能焦点
只在键盘焦点时显示轮廓，鼠标点击时不显示。
/* 现代方法：只在键盘导航时显示轮廓 */
button:focus-visible {
outline: 3px solid #3498db;
outline-offset: 2px;
}
/* 鼠标点击时不显示轮廓 */
button:focus:not(:focus-visible) {
outline: none;
}
轮廓的简写属性
element {
outline: 2px solid red; /* 宽度 样式 颜色 */
outline: thick dashed #3498db; /* 任意顺序 */
outline: none; /* 无轮廓 */
}
最佳实践
1. 焦点指示（最重要的用途）
为键盘导航用户提供视觉反馈。
/* 良好的焦点样式 */
button:focus,
input:focus,
a:focus {
outline: 2px solid #3498db;
outline-offset: 2px; /* 增加轮廓与元素的间距 */
}
/* 更精美的焦点样式 */
.custom-focus:focus {
outline: 3px dashed #e74c3c;
outline-offset: 4px;
background-color: #fffacd; /* 同时改变背景色 */
}