outline: none 无效是因为 Bootstrap 的蓝色焦点框由 outline 和 box-shadow 双重叠加构成；必须同时清除所有相关伪类（如 :focus、:active:focus、.active:focus 等）的 outline 和 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:active:focus，这是最常被忽略的“闪一下”元凶：
-
.btn:focus：Tab 进入或鼠标点击后获得焦点 -
.btn:active:focus：鼠标按下且仍处于焦点态（松手前） -
.btn.active:focus：toggle 类按钮（如下拉开关）激活时 -
.btn.focus和.btn:active.focus：Bootstrap 4/5 中 JS 动态添加的 class -
.btn.active.focus：同上，带 active 状态的动态 class
推荐的全局 CSS 写法（不依赖 !important）
把这段代码放在你自己的样式文件末尾（确保加载顺序在 Bootstrap 之后），不用 !important 也能生效：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
box-shadow: none;
}
注意：border-color: transparent 不必加——除非你用了 btn-outline-* 类，否则它不会导致边框变蓝；加了反而可能让某些主题下聚焦时边框消失，破坏视觉一致性。
别只改按钮，其他可聚焦元素同样要处理
输入框、下拉框、自定义 checkbox 都走同一套 focus 机制。只清 .btn 会导致表单里其他元素依然亮蓝边，体验割裂：
-
.form-control:focus：用于<input>、<textarea></textarea> -
.custom-select:focus：Bootstrap 自定义下拉框 -
.custom-checkbox input:focus + .custom-control-label：自定义 checkbox 的 label
更关键的是：去掉所有 outline 和 box-shadow 后，键盘用户将完全无法识别当前焦点位置——这不是样式问题，是可访问性缺陷。如果真要禁用，默认焦点反馈，至少得用 background-color 或 border 提供替代视觉提示，否则项目过不了基础无障碍审查。
