只设outline: none无效，因bootstrap蓝色边框由outline与box-shadow双重叠加构成；必须同时清除两者，并覆盖.btn:focus、.btn:active:focus、.btn.active:focus、.btn.focus、.btn:active.focus、.btn.active.focus所有状态。
只写 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) —— 这才是你看到的那圈发亮蓝边。只清 outline，阴影还在；只清 box-shadow，旧版 Firefox 仍 fallback 显示 outline。
.btn:focus 和 .btn:active:focus 必须同时覆盖
点击按钮松手那一瞬间，触发的是 .btn:active:focus，不是 .btn:focus。很多开发者只写了前者，结果按钮“点一下闪一下蓝边”，就是这个状态漏掉了。
-
.btn:focus：键盘 Tab 进入或鼠标点击后获得焦点 -
.btn:active:focus：鼠标按下未松开时仍处于焦点态（松手前） -
.btn.active:focus、.btn.focus、.btn:active.focus、.btn.active.focus：Bootstrap 4/5 中 JS 动态添加的 class，也得覆盖
稳妥写法（放在你自己的 CSS 文件末尾，确保加载顺序在 Bootstrap 之后）：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
box-shadow: none;
}
要不要加 !important
一般不用，但如果你的自定义样式表加载顺序在 Bootstrap 之后，且没提高选择器权重，就可能被覆盖——这时加 outline: none !important 最省事。不过更推荐用更高优先级的选择器，比如 button.btn:focus 或直接在 HTML 中加 class="btn btn-no-focus" 再配独立规则，避免全局污染。
-
outline: 0不推荐：某些旧浏览器（如 IE11）对0解析不一致，none更可靠 - 如果用了 Sass，检查是否启用了
$enable-focus-ring: true这类增强配置，它会主动插入更多 focus 样式 - 别忘了
border-color: transparent—— 某些主题下（比如btn-outline-primary）聚焦时边框本身会变蓝，光清 outline 和 shadow 不够
真正容易被忽略的点
清除按钮蓝边只是表象，背后是可访问性权衡。粗暴写 *:focus { outline: none } 会破坏所有可聚焦元素的键盘导航体验，尤其影响屏幕阅读器用户。更合理的做法是用 :focus-visible 做条件判断：鼠标点击后不显示 outline，键盘 Tab 进入时仍保留。但 iOS Safari 15.4 之前不支持，老设备上得靠双保险策略——比如同时设置 box-shadow 作为替代焦点指示。这点上线前不测无障碍工具，很容易被审计打回。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
