button:active没反应需先确认是否被真正激活，必须用语义化<button>元素或添加role="button"和tabindex="0"，并设置touch-action: manipulation、-webkit-tap-highlight-color: transparent，同时确保transition定义在常态规则中且父容器无pointer-events: none或overflow: hidden。
button:active没反应？先确认是否被真正激活
很多 Bootstrap 按钮写了 :active 却没反馈，不是 CSS 写错，而是浏览器压根没把它当可点击元素处理。iOS Safari 尤其严格：纯 <div class="btn"> 默认跳过 :active，哪怕加了 onclick 也不行。
必须声明交互意图：
- 用语义化
<button>最稳妥（别用<div>或<a>伪装） - 若必须用非按钮元素，得同时加
role="button"和tabindex="0" - 移动端加
touch-action: manipulation禁用 300ms 延迟判断，否则:active被卡住 - 禁用 iOS 灰色高亮层：
-webkit-tap-highlight-color: transparent，否则先闪灰膜再变色，反馈被覆盖
还要检查父容器有没有 pointer-events: none 或 overflow: hidden——后者会把 :active 中的阴影或缩放边缘裁掉。
transition 必须写在常态规则里，不能塞进 :active
:active 是伪类状态，不是动画钩子。过渡效果必须定义在常态选择器中，且所有要过渡的属性都得有明确初始值，否则浏览器无法插值。
立即学习“前端免费学习笔记（深入）”；
正确写法：
button {
transform: scale(1);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
button:active {
transform: scale(0.96);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}常见错误：
- 在
:active里写transition—— 完全无效 - 用
transition: all—— 颜色变化触发 repaint，低端安卓机明显卡顿 - 过渡
width/height/border-width—— 触发 layout thrashing，直接掉帧
时间控制在 0.06s–0.1s：PC 可用 0.06s，移动端建议 ≥0.08s；太短像没响应，太长反馈迟钝。
只改 background-color 几乎无效，人眼根本察觉不到
在强光屏、小尺寸设备或深色背景上，单靠颜色变深/变浅几乎无法感知“按下”。真正有效的反馈依赖形变和光影变化，因为人眼对位置和明暗梯度更敏感。
必加组合：
-
transform: scale(0.96)（比translateY(1px)更稳定，iOS 上后者有时触发重排闪烁） -
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15)（模拟受压内阴影，别漏inset关键字） - 常态按钮带轻微外阴影营造“凸起”感：
box-shadow: 0 2px 6px rgba(0,0,0,0.15)，形成对比 - 深色模式下需单独覆盖：
@media (prefers-color-scheme: dark) { .btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); } }
Bootstrap 自带的 :active 效果极易被覆盖
Bootstrap 5 默认的 .btn 在点击时确实有轻微 transform: translateY(1px) 和阴影变化，但这个效果极易被自定义 CSS 覆盖。常见原因是：
- 全局重置（如
* { transition: none !important; }） - 局部写了
transform: none却没为:active单独恢复 - 用了
!important覆盖默认规则，却忘了同步覆盖:active版本
如果你期望的是 scale(0.96) 这类视觉反馈，必须显式重写 :active 规则，不能依赖默认行为。另外，transform-origin: center 推荐加上，避免缩放偏移。
移动端真机调试时最容易忽略的三件事：是否加了 touch-action: manipulation、是否禁用了 tap highlight、是否误删了 position: relative（尤其对波纹或 spinner 类效果）——这些不修复，再精细的 :active 样式也白搭。
