CSS 轮廓（outline）属性

轮廓（outline） 是在元素边框外侧画的一圈线。它和 border 很像，但有重要区别：outline 不占据空间，不会影响布局，也不会影响元素的实际宽高和相邻元素的位置。

outline 与 border 的区别

特性	border	outline
是否占空间	是，会改变元素盒子的尺寸	否，不占空间
是否参与布局	是	否
可否分边设置	可以（上/右/下/左）	可以，但多数浏览器四边一致
圆角	受 border-radius 影响	多数情况下不随 border-radius
常见用途	装饰、分隔	焦点指示（如键盘/无障碍）

---

常用属性

• outline-width：轮廓宽度（如 2px）
• outline-style：轮廓样式（solid、dashed、dotted 等，同 border）
• outline-color：轮廓颜色
• outline-offset：轮廓与边框之间的间距（可为负值，让轮廓往里收）
• outline：简写（width style color）

---

基本写法

input:focus {
  outline: 2px solid #0066cc;
}

button:focus {
  outline: 2px dashed orange;
  outline-offset: 2px;   /* 轮廓离边框 2px */
}

简写顺序：outline: width style color;（与 border 一致）。

---

常见用途：焦点样式（:focus）

链接、按钮、输入框在键盘聚焦时，浏览器会显示一个轮廓（或高亮），方便键盘用户和无障碍用户知道当前焦点在哪。用 outline 可以自定义这个样式，而不影响布局：

a:focus,
button:focus,
input:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

不要随意去掉焦点轮廓

若用 outline: none 去掉默认焦点样式，必须同时提供其它明显的焦点指示（如背景色、边框、阴影），否则键盘用户难以知道焦点位置，无障碍性会变差。

---

去掉默认轮廓（并替换为其它样式）

若不想用浏览器默认的轮廓样式，可以自己写一套：

button:focus {
  outline: none;           /* 去掉默认 */
  box-shadow: 0 0 0 2px #0066cc;  /* 用阴影模拟一圈线 */
}

这样既不占空间，又保留了可见的焦点反馈。

---

小结

• outline 画在边框外，不占空间，不影响布局。
• 常用 outline 做 :focus 焦点样式；简写为 outline: width style color。
• 可用 outline-offset 控制轮廓与边框的距离。
• 去掉 outline 时，务必用其它方式提供焦点指示，保证可访问性。

下一节学习 CSS margin（外边距）。