outline 和 border 的区别

Category（分类）: CSS Status: 未知

参考资料：

• MDN：outline
• CSS Basic User Interface Module

什么是 CSS Outline？

CSS outline 是绘制在元素边框外侧的一条轮廓线，常用于焦点指示、调试和临时突出显示。它与 border 看起来相似，但两者参与布局的方式不同。

CSS 规范和浏览器实现通常体现出两个重要区别：

• outline 不参与盒模型，也不占用布局空间；
• outline 不一定是简单的矩形，遇到多行行内内容或圆角时，具体形状由浏览器绘制规则决定。

1. outline 不占用布局空间

outline 绘制在元素边框外侧，不会改变元素的布局尺寸和位置，也不会让周围元素重新排列。但它可能覆盖相邻内容，因为它没有为自己预留空间。

例如：

.image-border {
  width: 50px;
  height: 50px;
  border: 2px solid #2563eb;
}

.image-outline {
  width: 50px;
  height: 50px;
  outline: 2px solid #2563eb;
}

默认 box-sizing: content-box 时，前者的外部宽度通常是：

50px + 2px + 2px = 54px

而 outline 不会增加元素的布局宽度，元素仍然按照 50px 的尺寸参与布局。

CSS 轮廓属性的常见取值如下图所示，具体支持情况应以当前浏览器为准：

box-sizing 对两者的影响

.content-box {
  box-sizing: content-box;
  width: 50px;
  border: 2px solid #2563eb;
}

.border-box {
  box-sizing: border-box;
  width: 50px;
  border: 2px solid #2563eb;
}

• content-box：width 只表示内容宽度，内边距和边框会增加外部尺寸；
• border-box：width 通常包含内容、内边距和边框，但不包含外边距；
• outline 不受 box-sizing 控制，无论哪种盒模型都不会参与元素尺寸计算。

因此，“border 添加到元素外部宽高”只适用于 content-box 等具体条件，不能脱离盒模型绝对化描述。

2. outline 可以呈现非矩形轮廓

outline 不一定只能是一个规则矩形：

• 多行行内内容可能按照多个行盒绘制轮廓；
• 圆角元素的 outline 可能参考圆角边缘；
• 不同浏览器对轮廓的连接方式和偏移位置可能略有差异。

这并不意味着 outline 可以任意绘制圆形或复杂图形。需要绘制稳定、可控的圆形或复杂边框时，应使用 border-radius、伪元素、clip-path、SVG 等更适合的方案。

3. outline 的语法

outline 是 outline-width、outline-style 和 outline-color 的简写：

.card {
  outline: 2px solid #2563eb;
  outline-offset: 4px;
}

也可以分别设置：

.card {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #2563eb;
  outline-offset: 4px;
}

outline-style 的默认值通常为 none，如果没有设置轮廓样式，可能看不到 outline。

outline-offset 用于调整轮廓与边框之间的距离，不会影响布局：

button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

4. outline 的常见用途

4.1 键盘焦点指示

浏览器的默认用户代理样式通常会为获得焦点的链接、按钮和表单控件显示轮廓，但这是浏览器默认 CSS 的结果，不是 outline 属性自动检测焦点。

开发者可以使用 :focus-visible 提供更明确的键盘焦点样式：

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

不要直接全局移除焦点轮廓：

/* 不建议 */
:focus {
  outline: none;
}

如果确实需要移除默认样式，必须提供同样清晰的替代焦点指示，否则键盘用户无法判断当前焦点位置。

4.2 临时调试盒模型

调试时可以使用 outline 查看元素边界：

.debug * {
  outline: 1px solid rgb(255 0 0 / 20%);
}

它不会改变布局，比临时添加 border 更适合观察元素边界。

4.3 突出显示元素

搜索结果或临时状态可以使用 outline 高亮，而不会因为增加 border 造成布局变化：

.search-result.is-current {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

不建议依赖旧式的：

outline-color: invert;

invert 属于历史写法，浏览器支持和具体效果不应作为现代项目的可靠依据。建议显式指定颜色，并确保与背景有足够对比度。

5. border 与 outline 的对比

6. 常见误区

误区一：outline 只适用于链接和表单控件

错误。outline 可以应用于各种元素。链接和表单控件只是浏览器默认经常显示焦点轮廓的元素。

误区二：outline 一定是矩形

错误。多行行内内容和圆角元素的轮廓可能不是简单的矩形，但不同浏览器的具体绘制结果可能不同。

误区三：border 一定会增加声明宽度

不一定。使用 box-sizing: border-box 时，border 通常包含在声明的宽高内；使用 content-box 时，border 才会增加外部尺寸。

误区四：outline 不占空间就不会触发重绘

错误。outline 不影响布局，因此通常不会导致 reflow，但增加、修改或删除 outline 仍然可能触发 repaint 或绘制失效。

误区五：可以放心删除默认 focus outline

错误。删除焦点样式会损害键盘操作和无障碍体验。必须提供可见的替代样式。

7. 实际使用建议

组件结构边框使用 border

.input {
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.input:focus {
  border-color: #2563eb;
}

如果切换 border 宽度会导致尺寸或布局变化，可以固定 border 宽度，只改变颜色，或者使用 outline/box-shadow 作为焦点提示：

.input:focus-visible {
  outline: 3px solid rgb(37 99 235 / 35%);
  outline-offset: 2px;
}

焦点指示使用 outline

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

不要用 outline 替代语义内容

轮廓只是一种视觉效果。错误信息、必填说明和操作状态仍应通过真实文本、ARIA 或 HTML 属性表达：

<label for="email">邮箱</label>
<input id="email" type="email" required aria-describedby="email-help">
<p id="email-help">请输入有效的邮箱地址。</p>

8. 关于 reflow 和 repaint

修改 border 可能影响盒模型尺寸，从而触发布局重新计算；修改 outline 通常不会影响布局尺寸，因此通常不会触发由尺寸变化引起的 reflow。

但两者都是可绘制样式，浏览器仍可能需要重新绘制受影响区域：

• border：可能影响布局和绘制；
• outline：通常只影响绘制，不参与布局；
• box-shadow：通常也不参与布局，但可能产生较大的绘制区域。

不要把“不会改变布局”和“不会发生任何重绘”混为一谈。

总结

1. border 是盒模型的一部分，通常用于组件的结构性边框；
2. outline 绘制在边框外侧，不参与盒模型，也不会为自己占用布局空间；
3. border 是否增加外部尺寸取决于 box-sizing；
4. outline 可能覆盖相邻内容；
5. outline 可以用于多行内容和圆角元素，但具体形状由浏览器实现决定；
6. outline 最重要的用途之一是提供键盘焦点指示；
7. 不要无条件使用 outline: none，应使用 :focus-visible 提供可见替代样式；
8. outline 不影响布局不等于完全不会触发重绘；
9. 使用 border 表达组件边界，使用 outline 表达焦点、调试或临时高亮，通常更容易维护。

参考资料

• MDN：outline
• MDN：border
• MDN：box-sizing
• MDN：:focus-visible
• W3C：CSS Basic User Interface Module Level 4