CSS 轮廓

CSS 轮廓

了解如何使用 CSS 轮廓高亮元素而不影响布局。

轮廓（outline）是绘制在元素边框外部的一条线。它通常用于使元素“突出”，通常是为了无障碍原因，比如指示焦点。

与边框的主要区别：轮廓不占用空间。添加轮廓不会影响元素的尺寸或导致其他元素重新布局（reflow）。它们绘制在周围内容之上。

CSS outline 属性允许您控制这条线的样式、颜色、宽度和偏移。

核心概念与示例

轮廓样式设置：

您可以单独设置 outline-style、outline-color 和 outline-width，或者使用缩写属性 outline。

/* 单独属性 */
.element-with-outline {
  outline-style: dashed;
  outline-color: blue;
  outline-width: 2px;
}

/* 缩写：宽度 样式 颜色 */
.another-element {
  outline: 3px solid red;
}

轮廓偏移：

outline-offset 属性在边框边缘和轮廓之间添加空间。它可以接受正值或负值。

.element-with-offset-outline {
  border: 1px solid black;
  outline: 2px dotted green;
  outline-offset: 5px; /* 轮廓距离边框 5px */
}

轮廓与边框对布局的影响：

考虑两个相同的 div。一个有边框，另一个有轮廓。请注意边框如何将内容推开，而轮廓不会影响布局。

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  background-color: lightgray;
  display: inline-block; /* 用于并排比较 */
}

.has-border {
  border: 5px solid black; /* 宽度和高度增加 10px */
}

.has-outline {
  outline: 5px solid black; /* 不增加宽度/高度 */
}

无障碍用例：焦点指示器

轮廓对于向键盘用户显示哪个元素当前处于焦点至关重要。浏览器提供了默认的焦点轮廓，但您可以自定义它们以提高可见性，确保它们与背景有良好的对比度。

a:focus {
  /* 使用轮廓作为焦点指示器 - 不干扰布局 */
  outline: 3px solid dodgerblue;
  outline-offset: 2px;
  /* 可选：如果正在自定义，则移除浏览器默认轮廓 */
  /* outline: none; /* 只有在提供替代方案时才这样做！ */ */
}

/* 现代的焦点样式替代方案 */
a:focus-visible {
  outline: 3px solid dodgerblue;
  outline-offset: 2px;
}

避免移除轮廓（outline: none;），除非您提供了清晰的替代焦点指示器，因为这会损害无障碍性。

CSS 轮廓属性总结

属性	描述	示例值
outline	设置 outline-width、outline-style 和 outline-color 的缩写属性。	例如：2px dotted red
outline-color	设置轮廓的颜色。	例如：blue、#00FF00、rgb(255, 0, 0)、currentColor
outline-style	设置轮廓的样式。	auto（浏览器默认）、none、dotted、dashed、solid、double、groove、ridge、inset、outset
outline-width	设置轮廓的粗细。	例如：thin、medium、thick、2px、0.1em
outline-offset	设置轮廓与边框边缘之间的空间。	例如：5px、-2px、0.5em

有关更多详细信息，请参阅 MDN Web Docs 上关于 CSS Outline 的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/outline