在进行 Web UI 样式开发时，outline（轮廓）与 border（边框）在视觉上都可以为元素添加外围线框。但两者的盒模型计算机制与无障碍规范有着根本性的差异。本文解析两者的核心区别与选型场景。
一、 outline 与 border 的三大核心区别
| 对比维度 | 边框（border） | 轮廓（outline） |
|---|---|---|
| 是否占据盒模型空间 | ✅ 占据空间，会影响元素真实尺寸与文档流布局 | ❌ 完全不占空间，绘制在元素上方，绝不引发重排（Reflow） |
| 是否支持单边定义 | ✅ 支持（border-left、border-top 等） |
❌ 不支持（必须全包围四边） |
| 偏移量控制 | ❌ 仅能紧贴外边缘 | ✅ 支持 outline-offset（可向外或向内悬浮位移） |
二、 生产最佳实践建议
- 按钮/链接 Hover 动画： 优先使用
outline模拟选中框，避免因border增减导致周围元素抖动（Layout Shift）； - 键盘可访问性（Accessibility）： 切勿盲目设置
outline: none，建议使用:focus-visible保留键盘 Tab 导航聚焦高亮。