用 outline 替代 border 能避免重排仅当纯视觉高亮且不改动盒模型时，如表单聚焦态；outline 游离于盒模型外，不影响 offsetWidth 等，但不支持圆角、单边等 border 特性。
outline 不占据布局空间，所以用它替代 border 确实能避免重排（reflow），但前提是别误用——它只在元素获得焦点或被显式设置时才生效，且不支持圆角、单边控制等常见 border 能力。
什么时候用 outline 替代 border 真的能避重排？
仅当你要实现「视觉高亮但不改变盒模型」的场景，比如表单控件聚焦态、键盘导航焦点指示、调试时临时标出元素。此时 outline 渲染在元素外层，不影响 offsetWidth、getBoundingClientRect() 等返回值，自然不触发重排。
- ✅ 正确场景：给
button:focus加outline: 2px solid #007bff - ❌ 错误场景：想用
outline实现卡片边框——它无法设border-radius，也不能只加底部（outline-bottom不存在） - ⚠️ 注意：
outline默认有outline-offset，设为负值可能造成裁剪，且部分浏览器（如旧版 Safari）对outline的渲染位置不一致
outline 和 border 的盒模型影响差异
border 是盒模型一部分，增减宽度/样式会直接改变元素的 width、height 及周围流式布局；outline 是绘制层叠加，完全游离于盒模型之外。
- 添加
border: 1px solid red→ 元素实际占位变大（除非已设box-sizing: border-box） - 添加
outline: 1px solid red→getComputedStyle(el).width不变，相邻元素位置不动 - 但注意：
outline仍可能触发重绘（repaint），尤其动画中频繁修改颜色——这不是重排，但仍有性能代价
为什么有时加了 outline 还是触发了重排？
常见原因不是 outline 本身，而是你顺手改了其他属性，或者用了不兼容的写法。
立即学习“前端免费学习笔记（深入）”；
- 写了
outline: none后又用 JS 动态加outline: 2px solid blue，但同时修改了padding或margin—— 那重排来自后者 - 在伪类里写
outline: auto（如input:focus { outline: auto }），某些浏览器会回退到系统默认焦点环，而该环可能通过box-shadow模拟，反而引发重绘甚至重排 - 用
outline-width+outline-style+outline-color分开写，不如单条outline声明稳定；某些老引擎对分拆写法解析异常
更稳妥的无重排边框方案：box-shadow inset
如果真需要「像边框一样可控」又不想重排，box-shadow: 0 0 0 1px currentColor 是更灵活的选择——它也不占布局空间，支持单边、圆角、透明度，且兼容性比 outline 更好（IE11+）。
- 模拟上边框：
box-shadow: 0 -1px 0 0 currentColor - 模拟内边框（类似
border-box效果）：box-shadow: inset 0 0 0 1px currentColor - ⚠️ 注意：
box-shadow在高缩放或 Retina 屏下可能发虚，而outline始终是硬边；若对像素精度要求极高（比如 UI 组件库），仍得回归border+box-sizing控制
真正要避重排，关键不在换哪个属性，而在确认「只有这个属性在变」。哪怕用 outline，只要同时改 transform 或触发布局查询，重排照来。最常被忽略的，是开发者以为自己只动了 outline，其实 DevTools 里悄悄执行了 getBoundingClientRect() —— 那一帧已经重排了。
