Bootstrap按钮的“激活状态”阴影实际由:focus（或:focus-visible）控制，而非:active；:active仅在鼠标按下瞬间生效且无默认阴影，需JS手动添加class实现点击阴影。
button:focus 和 button:active 的阴影谁在起作用
bootstrap 按钮的“激活状态”阴影，其实不是由 :active 控制的，而是 :focus（或 :focus-visible）配合 box-shadow 实现的——尤其在点击后按钮仍保持焦点时（比如表单内连续操作），你看到的蓝边+阴影就是它。真正的 :active 只在鼠标按下瞬间生效，持续时间极短，人眼几乎无法捕捉。
常见错误是死磕 button:active 改阴影，结果改了没反应；或者用 !important 硬盖默认样式，导致键盘导航时焦点丢失、可访问性崩溃。
-
:focus是关键：Bootstrap 5 默认对.btn启用box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) - 如果禁用自动聚焦（如点击后不保留焦点），
:focus阴影不会出现，此时只能靠 JS 手动加 class 触发 - 移动端 Safari 对
:focus行为更保守，常需tabindex="0"配合才能触发
覆盖 .btn:focus 的 box-shadow 要绕过 Bootstrap 的优先级陷阱
Bootstrap 5 的 CSS 是从 node_modules/bootstrap/scss/_buttons.scss 编译而来，其中 .btn:focus 的选择器权重是 .btn:focus，而你自己写的 button:focus 权重更低，直接被忽略。
实操上最稳的方式不是改选择器，而是复刻它的权重并提高特异性：
.btn.btn-primary:focus,
.btn.btn-secondary:focus,
.btn:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
- 别写
button:focus—— 权重不够，无效 - 别只写
.btn:focus—— 如果你用了.btn-lg或.btn-outline-success，它们的 :focus 样式可能来自更具体的规则，会被覆盖不全 - 推荐把常用变体都列出来，或统一用
.btn:focus:not(:disabled):not(.disabled)精确控制
想让点击瞬间（:active）也有阴影？得手动干预
原生 :active 不带阴影是故意设计的：避免视觉跳变、符合 WCAG 焦点可见性规范。但如果你确实需要“按下即显阴影”，不能只靠伪类，因为 Bootstrap 默认给 :active 设了 box-shadow: none。
方案是用 JS 在 mousedown 时加临时 class，松开时移除：
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('mousedown', () => {
btn.classList.add('btn-active-shadow');
});
btn.addEventListener('mouseup', () => {
btn.classList.remove('btn-active-shadow');
});
});
再配 CSS：
.btn-active-shadow {
box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.2) !important;
}
- 不用
:active直接改，因为 Bootstrap 的.btn:active规则里有box-shadow: none，且权重高 - 加
!important是必要的——否则被 Bootstrap 原生规则压住 - 注意 touchstart/touchend 兼容移动端，否则手指点击无响应
自定义主题时，别漏掉 $btn-focus-box-shadow 变量
如果你用 Sass 编译 Bootstrap，最干净的方式是在自定义变量中覆盖 $btn-focus-box-shadow，而不是后期覆盖 CSS。
在你的 _custom.scss 中提前定义：
$btn-focus-box-shadow: 0 0 0 0.2rem rgba(100, 150, 255, 0.4); @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/buttons";
- 必须在
@import "bootstrap/scss/variables"之前定义该变量，否则无效 - 这个变量只影响
.btn:focus，不影响:active或:hover - 如果同时用了
$enable-shadows: true，它会影响.btn:hover的阴影，但和 focus 无关
真正难搞的是多态交互：键盘 Tab 进入、鼠标点击、触屏长按、辅助技术聚焦——每种路径触发的伪类不同，阴影表现也不同。别指望一个 CSS 规则通吃，得按场景分治。
