outline 不影响布局但默认行为与 border 不同：不支持圆角、不能分边设置、有默认 outline-offset 偏移且不响应 box-sizing；需设 outline-offset: 0 对齐位置，配合 focus-visible 保障可访问性。
outline 不影响布局，但默认行为和 border 完全不同
outline 确实不参与盒模型计算，不会触发重排（reflow），所以焦点切换时用它代替 border 能避免布局抖动。但它的默认表现很“松散”：不支持圆角、不能分边设置、默认有偏移（outline-offset）、且不响应 box-sizing。直接替换 border: 2px solid #007bff 为 outline: 2px solid #007bff 很可能让元素视觉位置偏移或焦点框悬浮在外。
必须显式重置 outline-offset 才能对齐 border 位置
浏览器默认给 outline 加了 outline-offset: 2px（具体值因 UA 而异），导致它总在元素边缘外“飘着”。要让它紧贴边框，得强制设为 0：
button:focus {
outline: 2px solid #007bff;
outline-offset: 0; /* 关键！否则会外扩 */
}
- 不加
outline-offset: 0→ 焦点框看起来“变大又偏移”，像抖了一下 - 如果原
border是1px，改用outline时也建议保持同宽，否则视觉节奏断裂 -
outline-offset支持负值，但负值可能裁剪 outline（尤其圆角元素），慎用
outline 无法实现 border-radius 效果，需配合其他方案
outline 永远是直角矩形，哪怕元素本身是 border-radius: 8px。如果设计要求焦点框也带圆角，仅靠 outline 不行：
- 方案一：保留
border，但用outline: none+box-shadow模拟焦点（更可控） - 方案二：用
outline做基础焦点，再叠加box-shadow: 0 0 0 2px rgba(0,123,255,0.3)模拟圆角光晕（注意层级和模糊半径） - 方案三：完全放弃 outline，用
border+transition: border-color 0.15s（无宽度变化则不抖）
focus-visible 是现代兼容的关键开关
直接全局用 outline 会破坏键盘用户的可访问性（比如 tab 导航时所有可聚焦元素都亮起）。应该只在用户明确用键盘操作时才启用：
button:focus:not(:focus-visible) {
outline: none;
}
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 0;
}
这样既避免鼠标点击时意外出现 outline，又保障键盘导航的可见性。注意 :focus-visible 在旧版 Safari 中需加 -webkit-focus-ring-color 回退，但直接设 outline 仍比依赖 outline: -webkit-focus-ring-color 更可靠。
真正容易被忽略的是：outline 的“不抖”只在它替代 border-width 变化时成立；一旦你同时修改 padding/margin/transform，抖动根源就转移了——这时候该查的是 layout 触发条件，不是 outline 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
