outline 不参与盒模型计算，不触发重排；border 属于盒模型，修改会改变尺寸并引发重排。二者在渲染位置、可访问性、性能及样式控制上存在本质差异。
outline 不会触发重排（reflow），因为它不占用文档流空间，也不影响布局尺寸；而 border 会改变元素的盒模型尺寸（除非用 box-sizing: border-box 且已预留空间），从而可能引发重排。但直接“用 outline 替代 border”不是无条件安全的——关键看用途和上下文。
outline 和 border 的渲染行为差异在哪？
outline 是绘制在元素「之外」的装饰线，不参与盒模型计算，不影响 offsetWidth、getBoundingClientRect() 等返回值；border 是盒模型的一部分，修改其宽度或样式会改变元素实际占位，浏览器必须重新计算布局。
常见错误现象：
– 给焦点态加 border: 2px solid blue 后，按钮轻微“跳动”
– 动画中频繁切换 border-color 却发现 FPS 下降（尤其在旧版 Chrome 或移动端）
使用场景建议：
– 纯视觉反馈（如 focus outline、hover 边框）优先用 outline
– 需要精确控制边框位置、圆角衔接、或与其他边框对齐时，仍应使用 border
如何让 outline 表现得像 border 一样可控？
outline 缺少 border-radius、不能单独设置某一边、不支持 border-image，所以需配合其他手段模拟：
- 用
outline-offset微调距离：例如outline: 2px solid #007bff; outline-offset: -2px;可让它“贴”到元素边缘（但注意负值可能导致裁剪） - 圆角需靠父容器遮罩或伪元素：原生
outline永远是直角，border-radius对它无效 - 单边效果只能伪造：比如只想要下边 outline，得用
box-shadow: 0 2px 0 0 #007bff或伪元素::after定位 - 避免和
border共存：同时设border和outline容易造成视觉重叠或意外偏移
focus 状态下用 outline 替代 border 的实操要点
这是最典型也最容易出问题的场景。默认 :focus outline 常被开发者用 outline: none 干掉，再用 border 重绘——这恰恰引入了重排风险。
推荐写法：
:focus {
outline: 2px solid #007bff;
outline-offset: 2px; /* 保持可访问性间距 */
outline-color: transparent; /* 若需隐藏但保留占位（不推荐） */
}
注意事项：
– 必须保留可访问性：移除 outline 后未提供等效焦点指示，会违反 WCAG 2.4.7
– outline-offset 为负值时，某些浏览器（如 Safari）可能截断 outline
– 不要用 outline: 0，它在部分旧浏览器中不等价于 outline: none
性能敏感动画中 outline 的边界条件
如果目标是高频更新（如 hover 边框动画），outline 确实比 border-width 更轻量，但仍有前提：
- 仅动画
outline-color或outline-style是纯绘制层操作（compositor-friendly） - 动画
outline-width在多数浏览器中仍会触发重绘（paint），但不会重排 —— 这比border-width好，但不如transform或opacity - 不要在 will-change 中写
outline：浏览器不支持该属性对 outline 的优化提示 - 真要极致性能？用
box-shadow: 0 0 0 2px currentColor+transition，它和 outline 渲染路径接近，且支持border-radius
真正容易被忽略的是：outline 的「不可见性」不等于「无开销」——即使设了 outline: 0 或 outline-color: transparent，浏览器仍需维护 outline 盒信息，尤其在大量元素上做 focus 管理时，DOM 焦点逻辑本身就有成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
