outline-offset 是唯一能在不改变元素尺寸、不触发重排的前提下调整焦点框距离的 css 属性；它仅对显式设置 outline 的元素生效，值为正向外偏移、负向内收缩，单位支持 px/em/rem，不支持百分比，且需配合 :focus-visible 使用以实现无障碍友好键盘焦点增强。
outline-offset 是唯一能在不改变元素尺寸、不触发重排（reflow）的前提下，把焦点框“推远”或“拉近”的 CSS 属性。它不侵占空间，也不影响盒模型，正适合做无障碍友好的焦点增强。
outline-offset 的作用范围和生效前提
这个属性只对设置了 outline 的元素起作用，且必须是显式声明的 outline（不能依赖浏览器默认 outline）。如果 outline: none 或没设 outline，outline-offset 无效。
-
outline必须存在，哪怕只是outline: 2px solid #007bff - 值为正数时，焦点框向外偏移（远离元素边缘）；负数则向内收缩（可能遮盖内容）
- 单位支持
px、em、rem，但不支持百分比 - 不触发 layout，只影响绘制层（paint），性能开销极低
常见错误：outline-offset 没反应？检查这几点
最常遇到的是“写了没效果”，基本都卡在这几个地方：
- 父容器设置了
overflow: hidden——outline和outline-offset超出部分会被裁剪，焦点框“消失”了 - 元素本身有
outline: 0或outline: none，覆盖了后续的outline-offset - 用了
border替代outline，但outline-offset对border完全无效 - 在伪类
:focus-visible中写了outline-offset，但没同时定义outline（很多开发者只写 offset，忘了 outline 是前提）
搭配 :focus-visible 实现键盘焦点专属偏移
现代做法是只对键盘导航用户增强焦点样式，避免鼠标用户的干扰。这时要确保 outline 和 outline-offset 都在 :focus-visible 里成对出现：
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 4px; /* 向外推 4px，避开 padding 边界 */
}
- 别在
:focus里设，否则 Tab 键和鼠标点击都会触发，体验反而变差 -
outline-offset: 2px是较安全的起点；4px更易识别，但需确认周围无遮挡（如卡片阴影、父级 overflow） - 若用深色主题，注意
outline-color要有足够对比度，WCAG AA 要求至少 3:1
真正容易被忽略的不是怎么写，而是 outline-offset 的“不可见性”——它不占空间、不参与布局计算，所以调试时用浏览器开发者工具的“Layout”面板根本看不到它的影响，只能靠视觉验证或截图比对。一旦父级有 overflow: hidden 或 clip-path，它就静默失效，连 warning 都不报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
