CSS Outline 轮廓

CSS 轮廓（outline）详解 · 难度：入门 · +10XP

CSS 轮廓（outline）详解

outline 是在元素边框之外绘制的一条线，用于突出显示元素。与 border 不同，outline 不占用布局空间（不改变元素尺寸或位置）。它通常用于显示键盘导航的可访问性聚焦指示器。

outline 简写属性

outline 同时设置轮廓的宽度、样式和颜色，顺序任意：

/* outline: width style color */
button:focus {
  outline: 2px solid #3498db;
}
input:focus {
  outline: 3px dashed #e74c3c;
}
.link-focus a:focus {
  outline: 2px solid #2ecc71;
  outline-offset: 4px;
}

outline 子属性

属性	作用	常用值
outline-width	轮廓宽度	1px / thin / medium / thick
outline-style	轮廓样式	solid / dashed / dotted / double / none
outline-color	轮廓颜色	任何颜色值 / invert（反色）
outline-offset	轮廓与边框的距离	px / em（可为负值）

outline 与 border 的区别

特性	outline	border
占用空间	不占空间	占用空间（影响布局）
四边	四条边必须相同	可单独设置每边
圆角	不跟随 border-radius	受 border-radius 影响
偏移	有 outline-offset	无 offset 属性
用途	聚焦指示、调试	视觉边界、装饰

自定义聚焦样式（可访问性）

/* 基础聚焦样式 */
*:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}
/* 针对不同表单元素 */
input[type="text"]:focus,
textarea:focus {
  outline: 2px solid #667eea;
  outline-offset: 1px;
  border-color: #667eea;
}
/* 使用 box-shadow 替代 outline（更美观） */
.btn:focus {
  outline: none;  /* 移除默认 outline */
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);  /* 替代聚焦环 */
}

outline-color: invert

invert 是 outline-color 的专有值，它会自动反转为与背景颜色对比鲜明的颜色，保证任何背景下都可见：

button:focus {
  outline: 2px solid invert;  /* 兼容性有限 */
}

使用 outline 进行调试

在开发时，outline 是非常实用的调试工具（因为它不占空间）：

/* 调试所有元素的盒模型 */
* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}
/* 只调试特定元素 */
.container > * {
  outline: 1px dashed #3498db;
}

outline 与 box-shadow 聚焦环对比

方法	代码	优点	缺点
outline	outline: 2px solid blue;	简单、原生、高对比度模式友好	不能跟随圆角
box-shadow	box-shadow: 0 0 0 3px rgba(0,0,0,0.3);	跟随圆角、美观	不占据高对比度模式

???? 练习

为表单输入框设置自定义的 :focus outline 样式
使用 outline-offset 创建离边框 4px 远的聚焦环
用 box-shadow 替代 outline 创建一个跟随圆角的聚焦指示器
在开发时用 outline 调试所有元素的布局边界
对比 outline 和 border 在同一个元素上叠加的效果