outline: none 单独无效，因 bootstrap 蓝边是 outline 与 box-shadow 双重叠加；必须同时清除两者，并覆盖 .btn:focus、:active:focus、.active:focus、.focus、.active.focus 等全部状态，且需为键盘用户提供替代焦点指示。
只写 outline: none 没用，必须同时清除 box-shadow 并覆盖所有可能触发蓝边的状态，否则点击松手后那圈蓝边一定会闪一下或一直挂着。
为什么 outline: none 单独写无效
Bootstrap 的蓝色外边框不是纯 outline，而是 outline 和 box-shadow 双重叠加的结果。Chrome/Firefox 默认的 focus outline 是系统色（深蓝或紫），而 Bootstrap 在 .btn:focus 里额外加了 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)——你看到的“发亮蓝边”，90% 来自这个阴影。只清 outline，阴影还在；只清 box-shadow，旧版 Firefox 仍 fallback 显示 outline。
必须覆盖的全部伪类与状态
漏掉任何一个，蓝边都可能在特定操作路径下复现：
-
.btn:focus：键盘 Tab 进入，或鼠标点击后获得焦点 -
.btn:active:focus：鼠标按下瞬间仍处于焦点态（松手前）——这是蓝边“闪一下”的元凶 -
.btn.active:focus：下拉 toggle 按钮等带active状态的按钮 -
.btn.focus和.btn:active.focus：Bootstrap 4/5 中 JS 动态添加的 class，也得覆盖
稳妥写法（适配 Bootstrap 4–5）：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
box-shadow: none;
}
确保这段 CSS 加载在 Bootstrap CSS 之后，一般不需要 !important。
去掉之后，键盘用户就“看不见焦点在哪”了
这是最常被忽略的一点：移除 outline 和 box-shadow 后，仅靠键盘操作的用户将无法判断当前焦点在哪，直接违反 WCAG 2.1。必须补一个替代视觉反馈：
- 给
.btn:focus加border: 2px solid #0d6efd（Bootstrap 主色） - 或改用更柔和的
box-shadow: 0 0 0 0.2rem rgba(13, 110, 237, 0.25)（就是原版参数，只是调淡透明度） - 或用背景色微调：
background-color: #e9ecef
别跳过这步。真正卡住项目的，往往不是 CSS 写不对，而是没想清楚“用户怎么知道当前按的是哪个按钮”。
