outline通常不触发回流，因其不占文档流且不改变元素尺寸；但动态outline-offset可能间接触发重排；替换border需同步清除border声明、复现outline样式并显式设outline-offset:0。
outline 真的不触发回流吗？先看浏览器行为
是的，outline 默认不占据文档流空间、不改变元素几何尺寸，因此添加或修改 outline（颜色、宽度、样式）通常不会触发 layout（回流）。但注意：这仅在 outline-offset 为 0 或固定值时成立；若用百分比、calc() 动态计算 outline-offset，部分浏览器（如旧版 Safari）可能间接触发重排。
border → outline 替换的关键三步
不是简单把 border 换成 outline 就完事。必须同步调整三个地方，否则视觉错位或焦点体验崩坏：
- 删掉所有
border相关声明（border、border-width、border-color等），否则两者叠加显示 - 用
outline-width+outline-style+outline-color复现原 border 效果（注意：outline不支持单边设置） - 加上
outline-offset: 0（显式声明，避免 UA 样式干扰；某些浏览器默认为 -2px，会导致内缩“吃掉”内容）
focus 状态下 outline 的兼容性陷阱
很多项目改用 outline 是为了聚焦态可访问性，但容易踩坑：
-
:focus时只设outline: none会彻底移除键盘导航线索——违反 WCAG，应改用outline: 2px solid #007aff等可见样式 - Chrome/Firefox 对
outline-radius无支持（别写），想圆角只能靠border-radius配合outline（outline自身不圆角，但会跟随元素边界） - 当元素有
transform或filter时，部分 Chrome 版本（≤115）渲染outline可能模糊或偏移，建议加will-change: outline或用box-shadow替代
什么时候 outline 反而更慢？
别迷信“outline 绝对高性能”。以下情况它可能比 border 更耗资源：
- 大量元素同时动画
outline-color（尤其是渐变色或 rgba 半透），GPU 合成压力上升 - 在
will-change: transform元素上叠加outline，某些 Chromium 版本会强制降级到 CPU 渲染 - 用
outline: auto（系统焦点框）时，不同 OS 渲染逻辑差异大，macOS 的 focus ring 有额外合成层开销
真正要规避回流，优先确保元素本身 width/height 固定、不依赖内容撑开；outline 只是补救手段，不是布局失控的解药。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
