outline-offset 在 Safari 和旧版 Chrome 中不生效，需用 box-shadow 替代并注意 spread-radius 从 content box 计算、需叠加 border-width；同时保留 outline 做无障碍 fallback。
outline-offset 在 Safari 和旧版 Chrome 中不生效
outline-offset 属性在 Safari（包括 iOS）和部分低于 Chrome 90 的版本中存在兼容性问题：即使写了 outline-offset: 5px，轮廓线仍紧贴 border 边缘，毫无偏移。这不是写法错误，而是这些浏览器的渲染引擎（WebKit/Blink 早期实现）未完整支持该属性，或仅在特定条件下（如 focus 状态）才触发。
常见错误现象包括：
- 开发时在 Chrome 最新版看到正常偏移，上线后用户反馈焦点轮廓“卡在按钮上”，UI 混乱
- 使用
outline: 2px dashed #007bff+outline-offset: 4px，但 Safari 完全忽略outline-offset - 自动测试（如 Puppeteer 启动旧版 Chrome）中 outline 偏移失效，导致视觉回归失败
用 box-shadow 替代 outline 实现可偏移的“伪轮廓”
box-shadow 不依赖 focus 状态、不受 outline-offset 兼容性限制，且可通过 spread-radius 精确控制“边框厚度”与“外扩距离”。关键是把 h-shadow 和 v-shadow 设为 0，blur-radius 设为 0，只靠 spread-radius 扩展出实线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单层轮廓替代：用
box-shadow: 0 0 0 2px #007bff模拟 2px 外描边；等效于outline: 2px solid #007bff+outline-offset: 0 - 带偏移的轮廓：想获得 “距 border 外边缘 4px 的 2px 描边”，就写
box-shadow: 0 0 0 6px #007bff（因为 border 占 2px，再外扩 4px → 总半径 = 2 + 4 = 6） - 多层轮廓：直接叠加，例如
box-shadow: 0 0 0 2px #eee, 0 0 0 6px #007bff，第一层是浅灰内边，第二层是蓝色外边 - 圆角兼容：box-shadow 自动跟随
border-radius，无需额外处理
outline-offset 仍可用，但必须加 fallback
outline 是语义化焦点指示的原生机制，无障碍（a11y）支持更好——屏幕阅读器、键盘导航都依赖它。不能因兼容性问题就彻底弃用 outline。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
安全做法是双写：
- 先声明标准 outline（含
outline-offset），服务现代浏览器 - 再用
box-shadow覆盖一层视觉轮廓，专为 Safari / 旧 Chrome 补位 - 确保两者颜色、粗细一致，避免双影重叠
示例：
.btn:focus {
outline: 2px solid #007bff;
outline-offset: 4px;
box-shadow: 0 0 0 2px #007bff, 0 0 0 6px rgba(0, 123, 255, 0.2);
}
注意：这里 box-shadow 第二段（0 0 0 6px）提供视觉偏移，第一段（0 0 0 2px）对齐 outline 的实际宽度，确保所有浏览器下视觉一致。
虚线/点线轮廓无法用 box-shadow 完美模拟
box-shadow 只能生成实线边框（blur: 0 + spread），无法实现 dashed 或 dotted 效果。如果你的 UI 强依赖虚线焦点（比如设计系统规范强制要求），就只能：
- 接受 Safari 下 outline-offset 不工作，改用更大
outline-width+outline-style: dashed提升可识别性 - 用伪元素
::after绘制 SVG 或 border-based 虚线环，但会增加 DOM 复杂度和维护成本 - 在 JS 层监听
focus，动态插入一个绝对定位的<div>模拟虚线轮廓（慎用，影响性能和 a11y）
真正容易被忽略的是：box-shadow 的 spread-radius 是从元素 content box 开始计算的，而 outline-offset 是从 border 外边缘开始。换算时务必把当前 border-width 加进去，否则偏移量会错位两倍。
