outline不占布局空间而border会，这是误用根源；outline仅用于焦点提示等纯视觉场景，不可控形状且不参与事件，需用box-shadow或border替代以满足可访问性与设计需求。
outline 不会占据布局空间，border 会
这是最常被误用的根源。当你给一个 div 加上 outline: 2px solid red，它不会影响周围元素的位置；但换成 border: 2px solid red，整个盒模型宽度和高度就多了 4px（上下/左右各 2px），可能触发重排或挤掉邻近元素。
常见错误现象：button 点击时突然“跳一下”——大概率是:focus 触发了 outline，而你同时又写了 border，两者叠加导致视觉错位。
- 使用场景：focus 状态高亮、键盘导航提示、临时调试框线（不干扰布局）
- 性能影响：outline 不参与 layout 计算，重绘开销略低于 border
- 兼容性：所有现代浏览器支持，IE8+ 也 OK，但 IE7 及更早版本不支持
outline-offset
outline 无法设置圆角，border 可以用 border-radius
outline 是画在元素“外侧”的一条粗略描边，浏览器不提供任何形状控制能力。它永远是矩形（哪怕元素本身是 border-radius: 50%），且不能分边设置（没有 outline-top 这种东西）。
常见错误现象：想让 focus outline 跟着按钮圆角走，结果 outline 还是直角矩形，显得割裂。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：放弃 outline，改用
box-shadow: 0 0 0 2px currentColor模拟，配合border-radius自然跟随 - 参数差异：
outline只有outline-style/outline-width/outline-color/outline-offset四个属性；border支持单边、圆角、虚线样式组合 - 注意：
outline-offset能把 outline 推离元素边缘，但值为负数时行为未定义（部分浏览器会忽略）
outline 不响应 pointer-events，border 是元素的一部分
outline 是纯粹的渲染层装饰，既不捕获鼠标事件，也不影响 pointer-events 设置。哪怕 outline 盖住了隔壁元素，点击那里依然触发的是底下那个元素的事件。
常见错误现象：用 outline 做“悬浮放大边框”，结果 hover 区域没变大，用户点到 outline 区域却没反应。
- 使用场景：仅用于视觉反馈（如键盘焦点），别指望它扩展可点击区域
- 替代方案：如果真需要扩大交互热区，用
padding或伪元素 +pointer-events: none - 性能提示：outline 不参与事件系统，所以对事件处理链无额外负担
自定义 focus outline 时，别直接 display: none
很多开发者为了“去掉丑陋的默认 outline”，在 :focus 里写 outline: none，结果让键盘用户完全失去焦点指示——这违反可访问性基本要求。
真正该做的是：用更可控的方式重置，比如用 outline: 2px solid #007bff + outline-offset: 2px，或者用 box-shadow 替代。
- 必须保留视觉焦点提示，WCAG 2.1 要求可见焦点至少 3:1 对比度
- 不要只在
:hover加样式，:focus必须独立存在 - Chrome/Firefox 默认 outline 有内阴影效果，移除后若不用替代方案，键盘用户会彻底“迷路”
复杂点在于：outline 的“不可控性”恰恰是它的设计目的——它本就不该参与布局或交互，只负责最基础的焦点传达。一旦你想精细控制形状、位置或交互行为，说明你其实该换用 border 或 box-shadow 了。
