Bootstrap 5+按钮点击后蓝边残留是因:focus状态使用box-shadow而非outline，需同时覆盖.btn:focus、.btn:active:focus等六种状态并重置box-shadow和outline，且须提供替代焦点样式以满足无障碍标准。
只清 outline 为什么按钮点击后蓝边还在
因为 bootstrap 5+ 的“蓝色边框”本质是 box-shadow，不是传统 outline。你看到的那圈发亮蓝环，其实是 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) 渲染出来的。chrome/firefox 即使设了 outline: none，这个阴影照样显示；而旧版 firefox 还可能 fallback 出系统色 outline。所以单写 outline: none 是无效操作。
.btn:focus 和 .btn:active:focus 必须同时覆盖
点击松手后蓝边“闪一下”，罪魁是 .btn:active:focus —— 它比 .btn:focus 权重更高，且自带独立 box-shadow。只覆盖前者，后者会立刻补位。稳妥写法是批量命中所有可能状态：
-
.btn:focus：键盘 Tab 或鼠标点击后获得焦点 -
.btn:active:focus：鼠标按下未松开时仍处于焦点态 -
.btn.active:focus：如下拉切换按钮（data-bs-toggle="button"）的激活+聚焦复合态 -
.btn.focus、.btn:active.focus、.btn.active.focus：Bootstrap JS 动态添加的 class，漏掉就白清
推荐 CSS 片段（放在你自己的样式表末尾，确保加载顺序在 Bootstrap 之后）：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none !important;
box-shadow: none !important;
}
用 shadow-none 类只能去“投影”，去不掉焦点蓝边
shadow-none 是 Bootstrap 提供的实用类，但它只作用于按钮的常规投影（比如卡片式按钮的底部阴影），对 :focus 状态下的高亮蓝环完全无效。那个蓝环是 .btn:focus 规则里硬编码的 box-shadow，和 shadow-none 所在的选择器层级、触发条件都不同。别指望加个类就一劳永逸。
去掉蓝边后，键盘用户就“看不见焦点在哪”了
直接清空 outline 和 box-shadow 后，Tab 导航时焦点完全不可见——这违反 WCAG 2.1 AA 标准，审计必挂。必须提供替代视觉反馈：
- 给
.btn:focus加border: 2px solid #0d6efd（Bootstrap 主色） - 或用更柔和的
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) - 或改背景：
background-color: #e9ecef（Bootstrap 的light色）
真正难处理的不是“怎么删”，而是删完之后，用户用键盘 tab 到按钮时，还能不能一眼认出它正在被聚焦。
