必须覆盖 .btn:focus、.btn:active:focus、.btn.active:focus、.btn:focus-visible、.btn:active:focus-visible、.btn.active:focus-visible 六种状态才能彻底移除蓝边，漏掉任一状态（尤其是 :active:focus）会导致鼠标点击松开瞬间闪出蓝边；仅写 .btn:focus 不足，因 Bootstrap 5 按钮在不同交互路径下会触发多组合伪类，且需兼顾键盘用户的无障碍焦点反馈。
直接给 .btn 所有焦点相关状态写死 outline: none 和 box-shadow: none 就能彻底移除——但必须覆盖全，漏一个状态（比如 :active:focus）就会在鼠标按下松开瞬间闪出蓝边。
为什么只写 .btn:focus 不够
Bootstrap 5 的按钮在不同交互路径下会触发多个伪类组合，单靠 .btn:focus 无法覆盖全部：
-
.btn:active:focus：鼠标按住未松开时仍处于焦点态，这是“点击后闪一下蓝边”的主因 -
.btn.active:focus：用于 toggle 按钮、下拉触发器等带active状态的场景 -
.btn:focus-visible：现代浏览器（Chrome 86+、Firefox 78+、Safari 15.4+）用它区分键盘 vs 鼠标焦点，漏掉会导致键盘用户无反馈
只写 .btn:focus 在鼠标点按 → 松开 → 键盘 tab 切入的流程中，蓝边大概率复现。
推荐的完整 CSS 覆盖规则
把以下代码放在你自定义 CSS 文件末尾（确保加载顺序在 Bootstrap 之后）：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn:focus-visible,
.btn:active:focus-visible,
.btn.active:focus-visible {
outline: none;
box-shadow: none;
}
注意点：
- 不加
!important通常也生效——前提是你的 CSS 文件在bootstrap.min.css后加载，且没被更高特异性规则覆盖 - 别用
*:focus { outline: none }全局清，会干掉所有可聚焦元素（如input、select、自定义 radio）的焦点提示 - 如果项目需兼容 Safari 15.3 及更早版本，
:focus-visible伪类无效，得补回.btn:focus:not(:focus-visible)回退逻辑
移除后键盘用户就“看不见焦点”了
这是最常被跳过的环节：清掉 outline 和 box-shadow 后，纯键盘操作的人完全无法判断当前聚焦在哪。WCAG 2.1 明确要求提供替代视觉反馈。可行做法：
- 给
.btn:focus加个微弱的border-color或background-color变化（例如background-color: #0d6efd; opacity: 0.9;） - 或只对鼠标操作禁用轮廓：
.btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }，保留:focus-visible给键盘用户 - 务必用键盘实测：Tab 进入按钮 → 按空格触发 → Tab 切到下一个元素，全程要能清晰感知焦点位置
真正难的不是写那几行 CSS，而是判断哪些交互路径会触发哪类伪类，以及是否愿意为无障碍让渡一点视觉控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
