outline-style: dashed 对焦点轮廓无效，因浏览器默认使用 outline: auto；须用 outline 简写（如 outline: 2px dashed #007aff）覆盖 auto 并指定宽度、样式、颜色，否则虚线可能渲染为实线或不可见，且存在可访问性风险。
outline-style: dashed 本身不能直接让焦点轮廓（focus outline）显示为虚线——因为浏览器默认的焦点轮廓样式是 auto，它由系统或 UA 样式控制，不响应 outline-style 的显式设置，除非你先覆盖掉 outline-style: auto 这个前提。
为什么 outline-style: dashed 在 focus 上经常没反应
现代浏览器（Chrome/Firefox/Safari）对可聚焦元素（如 <a>、<button>、<input>）应用的默认焦点轮廓是 outline: -webkit-focus-ring-color auto 1px 或类似 UA 规则，其中 auto 是一个特殊关键字，优先级高于 dashed 等常规值。只有显式设为非 auto 值后，outline-style 才真正生效。
- 直接写
a:focus { outline-style: dashed; }不起作用，因为outline-style单独声明不会覆盖已存在的outline简写值 - 必须同时指定
outline-style和outline-color（或用outline简写），且不能留auto - 部分旧版 Safari/IE 甚至忽略
dashed，只渲染实线或点状
正确写法：用 outline 简写覆盖默认 auto
最可靠的方式是用 outline 属性一次性声明样式、颜色和宽度，跳过 auto 干扰：
a:focus,
button:focus,
input:focus {
outline: 2px dashed #007aff;
}
- 必须指定宽度（如
2px），dashed在outline-width: 1px下极易渲染成视觉实线（和border-style: dashed同理） - 避免只写
outline-style: dashed+outline-color: xxx，某些浏览器会保留 UA 的outline-width导致行为不一致 - 如果要保留系统色（如 macOS 的蓝色环），可用
outline: 2px dashed -webkit-focus-ring-color，但注意该值非标准，Firefox 不支持
focus 虚线轮廓的兼容性与可访问性风险
用 dashed 替换默认焦点样式，容易在以下场景出问题：
立即学习“前端免费学习笔记（深入）”；
- 高对比度模式下，
dashed轮廓可能完全不可见（尤其浅色背景+浅色虚线） - Windows 高缩放（125%/150%）或 Retina 屏上，dash/gap 可能被像素取整，看起来像断续实线
- 屏幕阅读器用户依赖清晰、连续的焦点指示，
dashed若太细或间隙过大，会降低可发现性 - WCAG 2.2 要求焦点指示至少 2px 宽且与背景对比度 ≥ 3:1；纯
dashed很难稳定满足
真正稳定的 focus 轮廓，往往得放弃 dashed，改用 solid + outline-offset 拉远距离，或结合 box-shadow 模拟更可控的虚线效果——毕竟浏览器对 outline-style 的虚线渲染，本质上就是个“尽力而为”的黑盒。
