outline是唯一能实现视觉高亮但不改变布局的原生CSS方案，因其渲染在盒模型之外且不参与布局计算，而border属于盒模型组成部分会触发布局重排。
outline 是唯一能实现「视觉高亮但不改变布局」的原生 CSS 方案；用 border 做高亮必然触发布局重排，而 outline 不会——这是它不可替代的核心价值。
为什么 outline 不影响布局，而 border 会
outline 渲染在元素盒模型之外，完全游离于文档流，浏览器计算宽高、定位、父容器尺寸时直接忽略它；border 则是盒模型的正式组成部分，box-sizing: border-box 会把它算进 width/height，content-box 下则直接外扩元素尺寸。
常见错误现象：input:focus { border: 2px solid blue; } 导致输入框“跳动”，相邻元素位置偏移，尤其在 flex/grid 容器中极易破坏对齐。
- 使用场景：表单焦点反馈、调试时临时高亮、键盘导航状态标记
- 性能影响：
outline修改不会触发 layout（重排），只触发 paint（重绘）；border变更宽度或颜色在某些旧引擎下可能间接触发 layout - 兼容性：所有现代浏览器均支持
outline，包括 IE8+；无需前缀
outline-offset 能做什么，border 没有对应能力
outline-offset 控制轮廓线与元素边框之间的距离，支持正负值，是 outline 独有的调节杠杆。例如 outline-offset: -2px 可让轮廓轻微内收，贴合圆角边缘；outline-offset: 6px 则制造呼吸感留白。
立即学习“前端免费学习笔记（深入）”；
对比来看：border 没有偏移机制，想“外扩”只能靠 margin，但会干扰邻近元素；想“内缩”又受限于 box-sizing 和内容溢出风险。
- 典型写法：
button:focus { outline: 2px solid #007bff; outline-offset: 4px; } - 注意：必须先声明
outline-style（如solid），否则outline-offset无效 - 负值慎用：若
outline-offset过小或为负，可能被父容器overflow: hidden截断
outline 无法替代 border 的三个硬限制
outline 的设计定位是“非侵入式强调”，不是样式构建工具。它天然缺失 border 的结构能力：
- 不能设置单边：没有
outline-top或outline-left，整圈轮廓必须统一样式 - 不响应
border-radius：即使元素有border-radius: 12px，outline仍按矩形路径绘制（但视觉上会跟随圆角“弯曲”，因它紧贴 border 外缘） - 无法做装饰性边框：比如卡片的双线效果、渐变边框、图片边框（
border-image）等，全部要靠border或box-shadow
容易踩的坑：有人试图用 outline 模拟卡片边框，结果发现圆角处线条断裂、四角不连贯——这不是 bug，是规范行为。
可访问性红线：别随便用 outline: none
浏览器默认给 input、button、a 等可聚焦元素加蓝色虚线 outline，这是 WCAG 2.1 强制要求的键盘导航可见性保障。直接写 outline: none 会切断键盘用户操作链。
正确做法是：禁用默认轮廓的同时，提供等效视觉反馈。例如：
input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
关键点在于：替代方案必须足够醒目、有明确边界、颜色对比度 ≥ 3:1，并且在高对比度模式下依然可见。这比单纯写个 outline 严格得多。
