outline 是绘制在元素外部的装饰线，不参与布局计算，不影响 offsetWidth 等尺寸属性和相邻元素位置；border 则属于盒模型边界层，其宽度计入总宽高并触发重排。
outline 是绘制在元素“外部”的装饰线，不参与布局计算
浏览器渲染时，outline 被当作纯粹的视觉层叠加在已排版完成的盒模型之上，它不会改变 offsetWidth、getBoundingClientRect() 返回的尺寸，也不影响相邻元素的位置。你可以把它理解成“画在画布最上层的一圈虚线”，画完之后，底下所有布局早已定稿。
而 border 是盒模型（W3C 标准盒模型）的正式组成部分，属于 border-box 的边界层，它的宽度会直接加进元素的总宽高里——哪怕你设了 box-sizing: border-box，border 依然占用空间（只是被算进 width/height 限额内，而非额外撑开）。
用 getComputedStyle 验证 outline 不影响 layout 尺寸
执行下面这行代码就能直观看到差异：
console.log(getComputedStyle(el).outlineWidth); // 可能是 "3px" console.log(el.offsetWidth); // 不含 outline 宽度
outlineWidth 返回的是样式值，但 offsetWidth、clientWidth、getBoundingClientRect().width 全都不包含它。对比之下，borderLeftWidth 和 borderRightWidth 会实实在在地体现在 offsetWidth 中（除非 border-style 是 none 或 hidden）。
立即学习“前端免费学习笔记（深入）”；
常见误操作：
- 用
outline模拟 focus 状态时，发现元素没“抖动”或“溢出”，误以为它没生效 → 其实它画出来了，只是没推挤其他元素 - 想靠
outline做“外发光”效果却忘了它不响应border-radius→outline永远是直角矩形，哪怕元素是border-radius: 50%
border-width 改变会触发重排（reflow），outline-width 不会
这是性能层面的关键区别：
- 修改
border-width→ 浏览器必须重新计算盒尺寸、重排布局 → 触发 reflow - 修改
outline-width或outline-color→ 只需重绘（repaint）→ 开销小得多
所以，在需要频繁切换焦点样式的场景（比如键盘导航），用 outline 更稳妥；但若你需要精确控制外边距或与其他元素对齐，就得老实用 border + margin 或 padding 配合。
outline 的不可控性常被低估
它看起来简单，但有几个硬限制容易踩坑：
-
outline不能设置不同方向的宽度（没有outline-top-width） -
outline不支持border-image、border-radius、box-shadow等任何修饰 -
outline-offset虽然能拉开距离，但它本身不占空间，且负值可能导致 outline 被裁剪（尤其在 overflow: hidden 容器中） - 部分旧版 Safari 对
outline-style: auto渲染异常，建议显式写solid或dashed
真正要模拟 border 的视觉效果又不想占空间？别硬扛 outline，改用 box-shadow: 0 0 0 2px currentColor —— 它可圆角、可模糊、不触发 reflow，还兼容大多数现代浏览器。
