必须同时清除 outline 和 box-shadow 才能彻底去除按钮点击后的蓝色/紫色边框，因 bootstrap 通过 box-shadow 模拟焦点高亮，且 :focus、:active:focus 等多状态均含该样式，仅设 outline: none 无效。
直接结论：只设 outline: none 不够，必须同时清除 box-shadow，否则点击松开后仍会残留蓝色/紫色边框。
为什么单加 outline: none 无效？
Bootstrap（v4/v5）默认对按钮的多个伪类状态都设置了焦点样式，包括 :focus、:active:focus、.active:focus、.focus 等。这些状态不仅依赖 outline，更关键的是用了 box-shadow 模拟“高亮边框”——尤其是那种带偏移、带模糊的蓝色环（0 0 0 0.2rem rgba(0,123,255,.25)）。只删 outline，box-shadow 还在，虚线框就还在。
.btn:focus 和 .btn:active:focus 必须同时覆盖
用户常只写 .btn:focus { outline: none; }，结果点击时消失、松手后立刻弹出蓝框。这是因为松手瞬间触发的是 :focus 状态（按钮仍处于聚焦态），而 Bootstrap 的 :active:focus 样式优先级更高，且含独立 box-shadow。正确做法是批量重置：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none !important;
box-shadow: none !important;
}
- 用
!important是因为 Bootstrap 的 CSS 权重高，普通规则易被覆盖 - 不要漏掉
.btn.active.focus—— 这是 Bootstrap 5 中用于下拉菜单、切换按钮等复合状态的类 - 如果项目用的是 Bootstrap 5.3+，还需额外加
.btn[data-bs-toggle="button"]:focus
全局生效还是局部加？看你的维护成本
局部加（仅当前页面）最安全，适合快速修复；全局加（如新建 reset.css）省事但风险高：
- 全局加时，务必确认所有交互组件（
<input>、<select></select>、<a></a>）是否也需要同样处理——否则键盘用户会失去焦点可见性，违反 WCAG 可访问性要求 - 若只需按钮去框，建议只针对
.btn类写样式，别用泛选择器如button:focus，避免影响原生<button></button>或第三方组件 - 某些定制主题（如 Bootstrap Studio 导出的包）可能把
box-shadow写在:hover里，所以顺手加上.btn:hover更稳妥
移动端 Safari 和 Firefox 的隐藏坑
iOS Safari 默认给可聚焦元素加灰色内阴影（::-webkit-focus-ring-color），即使你清了 outline 和 box-shadow，点按后仍可能看到一圈浅灰边。补上这句：
button:-moz-focusring {
outline: none;
}
button:focus {
outline: none;
-webkit-appearance: none;
}
另外，Firefox 会保留 ::-moz-focus-inner 的默认内边距，导致按钮尺寸微变，可加：
button::-moz-focus-inner {
border: 0;
padding: 0;
}
真正麻烦的不是代码多，而是不同浏览器对“聚焦态”的解释不一致——一个按钮在 Chrome 里干净了，在 Safari 里可能还闪一下，得逐个环境验证。
