按钮点击后出现蓝色边框和阴影是浏览器对:focus状态的默认可访问性反馈，bootstrap 5+主要用box-shadow实现；仅设outline:none无效，需同时重置box-shadow并提供替代焦点样式。
为什么按钮点击后总有蓝色边框和阴影
这不是 Bootstrap 特意加的“装饰”，而是浏览器对 :focus 状态的默认可访问性反馈：当用户用 Tab 键导航或点击按钮后，焦点仍停留在该元素上，outline（轮廓）和 box-shadow（阴影）会同时生效。Bootstrap 5+ 主要用 box-shadow 实现那个蓝色光晕，outline 反而常被设为透明或隐藏——所以只清 outline: none 往往没用。
直接有效的 CSS 写法（推荐局部覆盖）
在你自己的样式表里（确保它加载在 Bootstrap CSS 之后），写：
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
关键点：
- 必须加
!important，否则 Bootstrap 的高优先级规则（比如.btn:focus-visible）可能压过你 - 只写
.btn:focus就够了，不用连写:hover、:active——那些状态本来就不带蓝边 - 如果用了
data-bs-toggle（如折叠、下拉），还要额外处理.btn[data-bs-toggle]:focus
全局移除但不伤可访问性（别跳过这步）
直接删掉所有 outline 和 box-shadow 后，键盘用户就彻底“看不见焦点在哪”了。必须补一个替代视觉反馈：
- 给
.btn:focus加border: 2px solid #0d6efd（Bootstrap 主色）或background-color: #e9ecef - 或者用
box-shadow: 0 0 0 0.2rem rgba(13, 110, 237, 0.25)——这就是 Bootstrap 原版聚焦阴影的参数，只是把颜色调淡些 - 千万别只靠
outline: none就收工，这是 WCAG 2.1 违规操作
其他容易漏掉的同类元素
按钮不是唯一受害者。以下元素在点击/聚焦时也会亮蓝边，处理逻辑一致：
-
.form-control:focus（输入框、文本域） -
.custom-select:focus（自定义下拉） -
input[type="radio"]:checked + label.btn（选中态 radio 按钮） - 第三方插件如
.bootstrap-select .btn:focus，得看插件文档确认类名
它们都依赖 :focus 或 :checked 触发，核心思路永远是：先清 box-shadow，再管 outline，最后补一个键盘用户能感知的替代样式。
