outline-offset 本身无动画效果，需配合 transition 才能实现动效；必须默认声明 outline（不能为 none），且 transition 属性名须与 hover/focus 中修改的完全一致；Safari 15.4+ 才稳定支持其过渡，无障碍场景下优先使用 outline 而非 box-shadow。
outline-offset 不能直接做“动效”，它只是偏移量数值
outline-offset 本身不产生动画，它只控制 outline 边框相对于元素边缘的偏移距离（正数向外，负数向内）。想看到“动效”，必须配合 transition 对 outline-offset 或 outline-width 做过渡变化。
常见错误是只写 outline-offset: 4px; 然后加 hover 改值，但没加 transition —— 结果就是瞬间跳变，毫无动效可言。
实际可用组合有两类：
-
outline-width+outline-offset同时过渡（更自然） - 仅过渡
outline-offset（适合已有 outline 的场景）
hover 时用 transition 动画 outline-offset 的写法
必须显式声明 transition，且属性名要和 hover 中修改的完全一致。漏掉 outline-offset 就不会动。
示例（带外扩+加粗的聚焦效果）：
.focusable {
outline: 2px solid #007bff;
outline-offset: 2px;
transition: outline-offset 0.2s ease, outline-width 0.2s ease;
}
.focusable:hover,
.focusable:focus {
outline-offset: 6px;
outline-width: 3px;
}
注意点：
-
outline必须在默认态就存在（哪怕outline: none也不行，因为none无法过渡到具体值） - Chrome/Firefox 支持
outline-offset过渡，但 Safari 15.4+ 才稳定支持；旧 Safari 会忽略过渡，只做跳变 - 不要对
outline-color做transition—— 大部分浏览器不支持该属性的过渡
为什么不用 box-shadow 替代？
确实很多人用 box-shadow 模拟外边框动效，但它和 outline 本质不同：
-
outline不占布局空间，不影响流式排版；box-shadow虽也不占空间，但模糊半径过大时可能触发重绘性能问题 -
outline是无障碍焦点的默认视觉反馈机制，用它更符合可访问性规范（:focus-visible场景下尤其重要） -
outline-offset的偏移是精确像素级的；box-shadow的 spread radius 在多倍屏下易出现模糊或锯齿
所以如果目标是「聚焦态动效」，优先走 outline + outline-offset + transition 这条路径，而不是绕道 box-shadow。
focus-visible 场景下 outline-offset 动效容易失效的原因
现代浏览器推荐用 :focus-visible 替代无差别 :focus，但这里有个坑：:focus-visible 触发时机晚于 :hover，且某些情况下（比如点击后立即失焦）可能根本不会匹配。
若同时需要 hover 和 focus 动效，建议这样写：
.focusable:hover,
.focusable:focus-visible {
outline-offset: 6px;
outline-width: 3px;
}
关键点：
- 别只依赖
:focus—— 键盘用户进不来，鼠标用户又可能被:hover覆盖 - 确保
outline-style是solid或dashed；outline-style: none会让整个 outline 链路失效 - 移动端 touch 设备上，
:hover可能延迟触发或不触发，必须保留:focus-visible作为兜底
真正难调的不是数值，而是跨输入方式、跨浏览器、跨设备的一致性表现——outline-offset 动效看着简单，实则每一步都卡在兼容性边界上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
