应使用:focus-visible配合box-shadow替代outline，禁用原生光晕同时保留键盘焦点反馈；bootstrap 5已内置该逻辑，v4需手动添加@supports判断，并注意移动端回退及选择器优先级。
如何用CSS覆盖Bootstrap按钮的:focus-outline样式
Bootstrap默认会给所有可聚焦元素（包括按钮）添加蓝色光晕描边（outline），这是为了满足无障碍访问要求，但很多设计稿明确禁止该效果。直接删掉outline会破坏键盘导航体验，正确做法是用更可控的替代方案覆盖它。
为什么不能只写outline: none
单纯加outline: none虽能去掉光晕，但会彻底移除键盘焦点指示，导致使用Tab键操作按钮时用户完全看不到当前聚焦位置——这违反WCAG 2.1标准，且在部分浏览器（如Firefox）中可能被强制恢复outline。必须提供等效的视觉反馈。
推荐的三步覆盖方案
以Bootstrap 5为例（v4/v5结构一致），需同时处理以下几点：
- 用
outline: none禁用原生光晕 - 用
box-shadow模拟自定义焦点边框（支持圆角、颜色、透明度控制） - 确保
:focus-visible仅在键盘触发时生效，鼠标点击不显示（避免干扰）
示例CSS：
.btn {
outline: none;
}
.btn:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
注意：Bootstrap 5已内置:focus-visible逻辑，若你用的是v4或自定义构建版本，需手动补全@supports判断。
容易被忽略的兼容性细节
某些旧版Bootstrap主题或第三方插件会用!important强化outline规则，此时需提高CSS优先级：
- 在你的样式表中把选择器写得更具体，比如
.my-btn.btn:focus-visible - 避免用
outline: 0（IE遗留写法），统一用outline: none - 移动端Safari对
:focus-visible支持有限，可加回退：.btn:focus { box-shadow: ... }，再用@supports (selector(:focus-visible))包裹增强版规则
真正难的不是去掉光晕，而是让键盘用户和鼠标用户都得到恰到好处的反馈——这个平衡点需要实测Tab流+屏幕阅读器组合验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
