Bootstrap按钮点击后蓝色边框源于:focus状态的box-shadow而非outline，需同时清除outline和box-shadow并覆盖.btn:focus、.btn:active:focus等全部伪类，推荐用:focus-visible兼顾可访问性。
Bootstrap按钮点击后出现蓝色边框，不是 bug，而是浏览器原生 :focus 行为叠加 Bootstrap 自定义 box-shadow 的结果。单纯写 outline: none 无法彻底去掉——因为那圈“蓝边”约 90% 来自 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)，不是 outline 单独撑起来的。
为什么只写 .btn:focus { outline: none } 没用
Chrome 89+ 使用 outline-style: auto 渲染焦点环，它不响应 outline: none；Firefox 会 fallback 显示原生轮廓；而 Bootstrap 在多个状态里重复定义了 box-shadow。漏掉任一状态，蓝边就会在特定操作下闪现。
-
.btn:focus：Tab 进入或鼠标点击后获得焦点 -
.btn:active:focus：鼠标按下未松开那一帧（最常被忽略的“闪一下”元凶） -
.btn.active:focus：如 toggle 按钮处于激活态时再聚焦 -
.btn.focus和.btn:active.focus：Bootstrap 4/5 中 JS 动态添加的 class，也得覆盖
必须同时清空 outline 和 box-shadow
仅清 outline 或仅清 box-shadow 都不完整。两者必须同步处理，且需覆盖全部相关伪类组合。否则旧版 Firefox 仍显示轮廓，Chrome 仍渲染阴影。
- 写法示例（Bootstrap 5）：
.btn:focus, .btn:active:focus, .btn.active:focus, .btn:focus-visible { outline: none; box-shadow: none; } - 若项目还在用 Bootstrap 4，补上
.btn.focus和.btn:active.focus - 注意权重问题：Bootstrap 的 CSS 常带
!important，你的规则要加同级或更高权重（比如加.my-app前缀）
别忘了给键盘用户留个“替身”
直接全干掉焦点样式会破坏键盘导航体验，违反 WCAG 2.1。应该用 :focus-visible 实现“仅键盘触发时显示”，鼠标点击不显示。
- 推荐写法：
.btn:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; box-shadow: none; } - 这样 Tab 导航时有清晰边框，鼠标点按后完全无痕
- 注意：
:focus-visible在 Safari 15.4+ 才稳定支持，如需兼容更老版本，可搭配useFocusVisible类库或降级用 JS 监听keydown判断输入方式
真正难的不是删掉蓝边，而是删得干净又不伤可访问性——很多人卡在漏掉 .btn:active:focus 或没处理 :focus-visible 的降级逻辑上。
