outline 不影响 width/height 计算，因为它绘制在元素外部且被浏览器规范排除在盒模型之外，不占用布局空间、不参与任何尺寸计算；其与 border 的本质区别在于：border 属于盒模型、触发布局重排，outline 属于层叠绘制层、仅触发重绘且不可定位或圆角。
outline 为什么不影响 width/height 计算
因为 outline 是绘制在元素「外部」的装饰性轮廓，浏览器规范明确将其排除在盒模型（content-box / border-box）之外。它不占用布局空间，也不参与任何尺寸计算——width、height、padding、border 都完全无视它的存在。
outline 和 border 的关键区别在哪
两者视觉上相似，但语义和行为完全不同：
-
border是盒模型的一部分：影响getBoundingClientRect()返回的尺寸，触发重排（reflow），受box-sizing控制 -
outline是「层叠层」上的绘制：不触发重排，只触发重绘（repaint），位置固定在元素边框外侧（无法用top/left调整），且始终是矩形（不能圆角） -
outline默认随焦点自动出现（如input:focus），而border始终可见（除非显式设为none）
什么时候必须用 outline 而不是 border
核心场景是无障碍与可访问性保障：
- 键盘用户依赖
:focus的outline指示当前操作元素——移除它又不提供替代方案，会违反 WCAG 2.4.7（焦点可见性） - 某些 UI 组件（如模态框内按钮）需要保留原有
border样式用于状态区分（hover/active），同时用outline专供焦点提示 - 避免因加
border导致布局偏移：比如表格单元格加border会让列宽突变，而outline完全无感
outline 常见误用与修复方式
最典型问题是「删了 outline 又没补 focus 样式」，导致键盘导航失效。另一个隐形坑是 outline-offset 的兼容性：
立即学习“前端免费学习笔记（深入）”；
- 设
outline: none后，务必配:focus-visible+border或box-shadow替代（推荐后者，不占布局） -
outline-offset在 Safari 旧版本（≤15.4）中对outline-style: auto支持不稳定，建议统一用dotted/solid并显式设 offset 值 - 不要指望
outline-radius——CSS 中根本不存在这个属性；想圆角轮廓只能用box-shadow
真正难处理的是嵌套滚动容器里的 focus outline：它可能被父容器裁剪（overflow: hidden），此时得靠 outline-offset 外推或改用 box-shadow 模拟，否则用户根本看不到焦点在哪。
