outline 不影响布局是因为它被设计为“绘制层”而非“盒模型成员”，仅触发重绘不触发重排，不参与 width/height/margin 计算，也不受 margin/padding 推挤，其 offset 和 focus 语义专为可访问性设计。
outline 不影响布局是因为它被设计为“绘制层”而非“盒模型成员”
浏览器渲染时，outline 被当作纯粹的视觉装饰层，画在元素的「外边框之外」，但不参与 layout 计算。它不改变 width、height、margin 或 padding 的任何计算逻辑，也不触发重排（reflow），只触发重绘（repaint）。
而 border 是 CSS 盒模型的正式组成部分——W3C 规范明确定义 border 是 box 的边界，其宽度直接计入 width 和 height（除非使用 box-sizing: border-box）。所以只要 border 宽度变化，就可能推挤相邻元素、改变父容器尺寸，甚至触发 layout 重计算。
outline 无法用 margin/padding 推开，border 可以被 margin 影响
这是最直观的验证方式：给一个 div 同时设 border: 2px solid red 和 outline: 4px dashed blue，再加 margin: 10px：
div {
width: 100px; height: 100px;
border: 2px solid red;
outline: 4px dashed blue;
margin: 10px;
}
你会发现：
立即学习“前端免费学习笔记（深入）”；
-
border的 2px 算在元素实际占位内（若box-sizing: content-box），会影响周围元素间距 -
outline的 4px 完全「浮」在外部，不增加元素的 margin edge 到 border edge 的距离 - 即使把
outline-offset设为负值（比如-3px），它也只会向内绘制，依然不挤压内容或改变盒尺寸
outline 的 offset 和 focus 状态让它天然不适合布局控制
outline 的原始设计目标就是辅助可访问性（比如键盘 tab 时的焦点高亮），不是为了做边框装饰。因此它支持 outline-offset，允许自由偏移，且默认跟随元素的「形状轮廓」（包括圆角、clip-path 边界），但这些能力都建立在「不参与布局」的前提上。
如果你试图用 outline 模拟 border 效果，会踩这些坑：
- 无法设置不同方向的宽度（
outline-top不存在） - 不支持
border-radius（outline 永远是直角矩形，除非元素本身有 clip-path） - 在打印样式或某些缩放场景下可能被忽略或截断
- Firefox 对
outline在 transform 元素上的渲染位置偶有偏差
真正需要“不占空间的边框”时，该选什么？
如果业务需求确实是「视觉上有边框、但不能影响布局」，outline 并非唯一解，甚至不是最优解：
- 优先考虑
box-shadow: 0 0 0 Npx color（N 为等效边框宽度），它完全不占空间，支持圆角和多层，兼容性好 - 用伪元素
::after绝对定位 +inset: -Npx模拟，可控性强，能做圆角、虚线、渐变 - 仅限现代环境且需无障碍支持时，才用
outline+outline-offset配合:focus-visible - 绝对不要用
outline替代border做常规 UI 边框——它没有方向控制、不响应 hover 动画、在部分屏幕阅读器中语义模糊
真正容易被忽略的是：outline 的绘制时机晚于 border，且依赖于元素的「最终几何边界」。如果元素有 transform 或 clip-path，outline 会绕过它们的视觉裁剪区域，直接按原始盒模型绘制——这在复杂动效中常导致意外溢出。
