outline-offset负值在Chrome支持而Firefox忽略，Safari渲染不稳定；应统一用多层box-shadow替代，确保跨浏览器焦点样式一致，同时注意focus-visible适配和IE11降级处理。
Outline-offset 在 Chrome/Firefox/Edge 中的行为不一致
Chrome 从 80 版本起支持 outline-offset 的负值（如 outline-offset: -2px），但 Firefox 一直拒绝渲染负偏移，Safari 则对非零 outline 的 offset 渲染不稳定，尤其在 focus-visible 或动画中容易消失。这不是 bug，而是规范未强制要求负 offset 的渲染行为 —— 浏览器可选择忽略。
实际开发中只要一写 outline-offset: -1px 想让外轮廓“压进”元素边缘，Firefox 就直接当没这行样式处理，导致 focus 样式在不同浏览器里错位或缺失。
用 Box-shadow 替代 outline 实现可控的「外边框」效果
box-shadow 的 inset 和非 inset 模式都能模拟 outline，且所有现代浏览器对其解析完全一致。关键是用两层 shadow：一层透明占位（控制距离），一层实色（模拟轮廓）。
- 用
box-shadow: 0 0 0 2px #007aff等效于outline: 2px solid #007aff - 要实现
outline-offset: -1px的“内收”效果，改写为box-shadow: 0 0 0 1px #007aff, 0 0 0 3px rgba(0, 122, 255, 0.3)—— 第一层是主轮廓，第二层是模糊扩散层，视觉上产生内嵌感 - 若需精确像素级偏移（比如向外偏 2px），直接用
box-shadow: 2px 2px 0 0 #007aff，但注意这会带位移，不是纯环形；纯环形必须用多层同圆角的0 0 0 Npx组合
聚焦状态（:focus）下用 box-shadow 替换 outline 的注意事项
替换时最容易漏掉的是可访问性逻辑 —— outline 默认随 :focus 自动触发，而 box-shadow 需显式绑定，且不能破坏键盘用户的 focus 流程。
立即学习“前端免费学习笔记（深入）”；
- 务必保留原
outline: none的清除逻辑，否则 outline 和 box-shadow 叠加出现双轮廓 - 推荐写法：
button:focus { outline: none; box-shadow: 0 0 0 2px #007aff, 0 0 0 4px rgba(0, 122, 255, 0.2); } - 如果用了
focus-visible，要把box-shadow移到该伪类下，避免鼠标点击时也触发（Firefox 对focus-visible支持良好，Chrome/Safari 也已全量支持） - 别用
transition: box-shadow做 focus 过渡 —— Safari 在快速 tab 切换时可能卡顿；改用transition: all 0.2s ease更稳
IE11 及更老浏览器的降级处理
IE11 支持 outline 但不支持 outline-offset，也不支持 focus-visible；但它支持 box-shadow（无 blur 时）。所以降级方案不是“回退到 outline”，而是“用最简 box-shadow 兜底”。
- IE11 下
box-shadow: 0 0 0 2px #007aff完全可用，无需额外前缀 - 不要试图在 IE 中模拟 offset：它不支持
box-shadow的多层叠加渲染（第二层会被忽略），单层就是最可靠解 - 若项目仍需支持 IE，建议用
@supports not (outline-offset: 1px)来隔离新旧逻辑，而不是 UA 判断
真正麻烦的不是写法，而是设计系统里所有 :focus 样式都要重新校验 —— 比如按钮、输入框、自定义 checkbox 的 focus ring，每个都得手动把 outline 转成等效 shadow。稍有遗漏，就会在某个浏览器里突然“看不见焦点”。
