outline-offset 是控制 outline 轮廓线整体偏移的属性，必须与 outline-style 非 none 配合使用；正值向外、负值向内偏移，但受 overflow: hidden 和焦点状态影响而可能失效。
outline-offset 是什么，它和 outline 的关系
outline-offset 不是独立的边框控制属性，它只对 outline 生效，且必须配合 outline（或至少 outline-style）一起使用才有视觉效果。它的作用是把整个焦点轮廓线整体“平移”出元素边界——正值向外偏移，负值向内偏移（可能被裁剪）。如果 outline 没设置（比如只有 outline-color 但 outline-style: none），outline-offset 完全无效。
为什么设置了 outline-offset 却没反应
常见失效原因有三个：
-
outline-style必须是solid、dashed、dotted等非none值；仅设outline: 2px #007bff不够，因为省略写法默认outline-style: none - 父容器设置了
overflow: hidden，导致正向偏移的轮廓被裁掉（尤其在按钮、卡片等紧凑容器中） - 元素本身没有获得焦点（比如没加
tabindex，或被outline: none全局重置过）
实际可用的偏移值与兼容性注意点
outline-offset 接受长度单位（px、em、rem），不支持百分比。主流浏览器都支持，但有两个细节容易踩坑：
- 负值偏移时，轮廓可能部分或全部落入元素内容区，甚至被背景色盖住，需同步检查
background-color和z-index层级（outline永远在最顶层绘制，但会被父级overflow: hidden截断） - Safari 对
outline-offset在:focus-visible下的响应稍慢，建议搭配transition: outline-offset 0.15s提升感知流畅度 - 移动端 iOS Safari 不触发
:focus（除非是可编辑元素），所以用outline-offset做键盘导航提示时，要额外为input、textarea、button等显式声明
一个可靠的手动焦点调试写法
快速验证是否生效，推荐这样写（避免全局样式干扰）：
.debug-focus {
outline: 2px solid #007bff;
outline-offset: 4px;
transition: outline-offset 0.1s;
}
.debug-focus:focus {
outline-offset: 6px;
}
.debug-focus:focus-visible {
outline-offset: 8px;
}
注意：不要依赖 :focus-visible 单独生效，始终保留基础 :focus 回退；outline-offset 的数值变化非常细微，建议从 2px 起步逐步上调，超过 10px 后视觉分离感会变弱，反而降低可识别性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
