bootstrap 5 的蓝色焦点边框主要来自 box-shadow 而非 outline，仅设 outline: none 无效；需同时清除 outline 和 box-shadow，并为键盘用户提供无障碍替代样式。
这不是 Bootstrap 5 故意加的“难看装饰”，而是浏览器对 :focus 状态的默认可访问性反馈——你看到的蓝色边框，90% 是 box-shadow，不是 outline；只清 outline: none 根本没用。
为什么只写 outline: none 还是去不掉蓝边
Bootstrap 5 的 .btn:focus 默认加了 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)，这就是那圈发亮蓝边的来源。旧版 Firefox 还会 fallback 显示 outline，所以必须同时处理两者。
-
.btn:focus：键盘 Tab 进入或鼠标点击后获得焦点 -
.btn:active:focus：鼠标按下未松手时的瞬态，是蓝边“闪一下”的元凶 -
.btn.active:focus：如下拉 toggle 按钮等带 active 状态的按钮 - Bootstrap 5 已移除
.focus类，但部分 JS 插件仍可能动态添加.btn:active.focus等类名，也得覆盖
怎么写 CSS 才能真正生效（不靠 !important）
确保你的自定义样式表加载在 Bootstrap CSS 之后，然后写：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
box-shadow: none;
}
不用 !important 的前提：选择器权重够高、加载顺序正确、没被其他全局规则（比如 *:focus { outline: 2px solid blue !important; }）暴力覆盖。
去掉蓝边后，键盘用户就“瞎了”
这是最常被跳过的一步：移除 outline 和 box-shadow 后，仅靠键盘操作的用户完全无法判断当前焦点在哪，直接违反 WCAG 2.1。
- 推荐替代方案：
.btn:focus { border: 2px solid #0d6efd; }或background-color: #e9ecef; - 更稳妥的做法是用
:focus-visible：.btn:focus { outline: none; }<br>.btn:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; } - 注意 IE 不支持
:focus-visible，需搭配 polyfill 或降级为outline: 2px solid transparent防布局抖动
真正卡住人的从来不是“怎么去掉”，而是“去掉之后，谁来告诉键盘用户现在聚焦在哪”。别让无障碍变成事后补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
