Bootstrap 5 中 outline: none 不生效是因为其聚焦样式基于 :focus-visible 而非 :focus，需用 a:focus-visible { outline: none !important; } 或 .btn:focus-visible 覆盖，推荐改用 box-shadow 保持可访问性。
为什么 outline: none 在 Bootstrap 5 中不生效
Bootstrap 5 默认对所有可聚焦元素（包括 ）启用了 outline 样式，但它的实现依赖于 :focus-visible 伪类和 prefers-reduced-motion 媒体查询，而不是简单的 :focus。直接写 a:focus { outline: none; } 往往被 Bootstrap 的更高优先级规则覆盖，尤其在使用 btn 类时，其内部的 :focus-visible 规则会接管。
正确移除链接虚线框的 CSS 写法
必须提高选择器优先级，并匹配 Bootstrap 5 实际使用的聚焦逻辑。推荐以下两种方式：
- 针对普通链接：用
a:focus-visible { outline: none !important; } - 针对按钮类链接（如
）：覆盖 Bootstrap 的.btn:focus-visible，写成.btn:focus-visible { outline: none !important; } - 若需全局禁用（不推荐），可在
:root后加载自定义 CSS，并添加*:focus-visible { outline: none !important; }—— 但会破坏可访问性
更安全的替代方案：用 box-shadow 替代 outline
完全去掉聚焦样式会影响键盘用户导航。Bootstrap 5 本身也倾向用 box-shadow 表达焦点状态。你可以保留可访问性，同时隐藏原生虚线框：
a:focus-visible {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
这个写法既消除了难看的浏览器默认虚线，又维持了视觉反馈，且与 Bootstrap 5 的 $focus-ring-width 和 $primary 变量风格一致。
注意 tabindex 和可访问性陷阱
如果强行用 outline: none 且未提供其他焦点指示（如 box-shadow 或背景色变化），会导致键盘用户无法判断当前聚焦位置。尤其当链接没有 href 属性、仅靠 tabindex="0" 获得焦点时，问题更明显。
- 检查是否误删了
href或写了href="#"却没阻止默认行为，导致页面跳动 + 焦点丢失 - 避免对所有
a全局设outline: none；应按需作用于特定组件或交互区域 - 测试方式：用
Tab键导航，确认每个可聚焦元素都有清晰、一致的焦点样式
真正要处理的不是“怎么去掉虚线”，而是“如何让焦点状态既符合设计又不牺牲可用性”——这点在 Bootstrap 5 的 focus-visible 机制下尤其容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
