outline 不触发重排且不占布局空间，因其绘制在元素外层、不参与盒模型计算；但移除 border 改用 outline 会导致视觉“缩进”，需用 outline-offset 或 box-shadow 补偿，并优先使用 :focus-visible 确保可访问性。
outline 不触发重排，但默认不占空间
直接用 outline 替换 border 能避免布局抖动，是因为 outline 绘制在元素「外层」且不参与盒模型计算——它不会改变元素的 width、height 或影响相邻元素位置。但这也意味着：移除 border 后加 outline，视觉上可能“缩进”或“偏移”，尤其当原 border 有宽度时。
常见错误现象：focus 状态下加了 outline: 2px solid blue，元素看起来“变小了”或文字贴边，其实是原来 border 占的那 2px 空间没了。
- 若原
border: 2px solid #ccc，可先用box-sizing: border-box+padding补偿（例如加padding: 2px），再用outline实现聚焦效果 - 更稳妥的做法是统一用
outline，从一开始就放弃border用于交互反馈（如按钮 hover/focus） -
outline不支持圆角（outline-radius未被任何浏览器支持），若需圆角高亮，得用box-shadow模拟
focus 时用 outline 替代 border 的典型写法
适用于按钮、输入框等需要键盘导航的控件。核心是确保视觉反馈存在，又不挤占布局。
button {
/* 不设 border，避免 focus 时 border 出现导致位移 */
border: none;
outline: none; /* 先清掉默认 outline（丑且不可控） */
}
<p>button:focus {
outline: 2px solid #007bff;
outline-offset: 2px; /<em> 关键！让 outline 离元素边缘留空，避免紧贴文字 </em>/
}</p>
-
outline-offset是关键参数，负值会让 outline 向内收缩（可能遮挡内容），正值向外偏移，推荐1px–4px之间 - 不要依赖浏览器默认
outline（如 Chrome 的虚线蓝框），它样式不可控、可访问性差，且部分系统会禁用 - 若需兼容旧版 Safari（
outline-offset支持度差），可用box-shadow: 0 0 0 2px #007bff替代，效果一致且可控
outline 和 box-shadow 在聚焦反馈中的取舍
当 outline 不够用（比如要圆角、内阴影、多层描边），box-shadow 是更灵活的替代方案，但它仍不触发重排——前提是不改变元素尺寸或 margin。
-
box-shadow: 0 0 0 2px #007bff等效于outline: 2px solid #007bff，但支持border-radius和inset - 避免写
box-shadow: 0 2px 4px rgba(0,0,0,0.2)这类带模糊半径的样式做 focus 反馈——它会扩大渲染区域，虽不重排，但可能和相邻元素产生意外重叠或裁剪 - 性能上两者几乎无差别，但
outline更轻量；可访问性工具（如屏幕阅读器）对outline的语义识别更稳定
容易被忽略的可访问性细节
用 outline 替代 border 不是为了“好看”，而是为了保障键盘用户能清晰识别当前焦点。很多团队只在 :focus 加样式，却忘了 :focus-visible。
- 直接写
button:focus { outline: ... }会在鼠标点击后也触发 outline，干扰体验；应优先用:focus-visible - 现代写法：
button:focus:not(:focus-visible) { outline: none; }，或直接button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } - 某些 CSS 重置库（如 modern-normalize）已默认处理
:focus-visible，但老项目中常被覆盖，建议显式检查
真正难的不是加 outline，而是让它只在该出现的时候出现、出现在该出现的位置、且不偷偷吃掉布局空间。细节都在 offset、focus-visible 和初始 border 清理里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
