outline不生效主因是user-agent样式重置；firefox下需用outline-offset统一偏移；:focus-visible须置于:focus后并共存；outline无圆角属性，可用box-shadow替代。
outline 不生效？先检查是否被 user-agent 样式重置
很多情况下 outline 看似“没反应”，其实是浏览器默认样式里用 outline: none 主动清掉了，比如 Chrome 对 button、a 的 focus 状态，或某些 UI 框架（如 Bootstrap）的全局重置规则。
实操建议：
- 打开 DevTools → Elements 面板 → 选中元素 → 查看 Styles 侧栏，展开
:focus伪类，确认是否有outline: none或outline: 0被高亮标记为“已应用” - 用
!important强制覆盖（仅限调试阶段）：button:focus { outline: 2px solid #007bff !important; } - 更稳妥的做法是：在 CSS 重置层（如
reset.css或base.css）中，把outline: none改成outline: 0并限制作用域，避免无差别清除
Firefox 下 outline 偏移量不一致？用 outline-offset 统一控制
Chrome 和 Safari 默认给 outline 加了轻微外扩（约 1–2px），而 Firefox 默认 outline-offset: 0，导致焦点框紧贴边框，视觉上显得“卡进去了”。这不是 bug，是规范允许的渲染差异。
实操建议：
- 显式声明
outline-offset，例如：outline: 2px solid #3b82f6; outline-offset: 2px; - 避免用负值（如
outline-offset: -1px），它在部分旧版 Edge 中表现异常，且易与 border 重叠造成锯齿 - 若需适配高对比度模式（Windows HC），
outline-offset值不宜小于1px，否则系统可能忽略该轮廓
自定义 focus 样式被 :focus-visible 覆盖？优先级和触发逻辑要理清
:focus-visible 是现代可访问性方案，但它不会自动替换 :focus；而是“仅当用户用键盘触发焦点时才生效”。问题常出在：你写了 :focus 自定义样式，但又加了 :focus-visible 且没处理好层叠顺序，结果鼠标点击后反而回退到浏览器默认 outline。
实操建议：
- 把
:focus-visible放在:focus后面，确保它能覆盖（CSS 层叠规则） - 不要只写
:focus-visible，必须同时保留:focus基础样式，否则鼠标用户的焦点将无视觉反馈 - 示例安全写法：
button:focus { outline: none; }<br>button:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; } - 注意 Safari 15.4+ 才支持
:focus-visible，旧版本需降级 fallback（如靠 JS 检测keyboard-focus类）
outline 圆角失效？别指望 outline-radius
没有 outline-radius 这个属性。outline 永远是矩形框，即使元素本身有 border-radius，outline 也不会跟着圆。这是 CSS 规范明确规定的——outline 是绘制在元素盒模型之外的独立轮廓线。
实操建议：
- 想实现“圆角焦点框”，只能放弃
outline，改用box-shadow：box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); - 用
box-shadow时注意：多层 shadow 可模拟虚线或双线效果，但性能略低于 outline（尤其动画中） - 如果必须保 outline（例如满足 WCAG 2.4.7 焦点可见性要求），就接受它的直角特性，把设计调整为“不依赖圆角的视觉层级”
真正麻烦的是那些没出现在 DevTools 里的干扰项：比如某个父容器的 overflow: hidden 裁掉了 outline，或者 transform 触发了新的 stacking context 导致 outline 被遮挡。这类问题得一层层 inspect，没法靠统一规则解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
