button:active没反应需先确认元素是否被浏览器识别为可点击：必须用语义化或为/添加role="button"、tabindex="0"及ontouchstart=""；再禁用tap-highlight和300ms延迟，确保:active在层叠顺序中优先于:focus/:hover，并用transform+inset box-shadow实现有效反馈。
button:active没反应，先看它是不是真被激活了
很多开发者写了 button:active 样式却看不到效果，并非 CSS 写错，而是浏览器压根没把它当可点击元素处理。iOS Safari 尤其严格：纯 <div class="btn"> 默认跳过 <code>:active 状态计算，哪怕加了 onclick 也不一定触发。
必须显式声明交互意图：
- 最稳妥：直接用
<button type="button"></button>—— 自带语义、键盘导航、焦点管理，零配置即生效 - 若必须用
<div> 或 <code><span></span>：至少补上role="button"和tabindex="0" - 现代 iOS（12+）下，加空属性
ontouchstart=""是最轻量且可靠的“激活开关”，比全局 JS 监听更稳定 -
touch-action: manipulation—— 告诉浏览器“这里只点按，不缩放、不滚动”，消除延迟 -
-webkit-tap-highlight-color: transparent—— 干掉系统蓝灰膜，让:active样式真正可见 -
:active规则必须写在:hover和:focus之后，否则会被覆盖 - 避免在
:focus中设outline: none后不补替代样式，否则键盘用户也失去焦点提示 - 别依赖
transition: all—— 它会让所有属性参与过渡，容易导致悬停态残留、回弹抖动 - 必加
transform: scale(0.96)（比translateY更稳，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); } }
iOS Safari 上 :active 被灰色高亮盖住或延迟触发
移动端默认有约 300ms 的双击延迟判断，:active 会被卡在等待状态；同时系统自带的点击高亮层（-webkit-tap-highlight-color）会覆盖你的自定义样式，造成“闪一下灰再消失”的错觉。
必须加这两条 CSS 到按钮选择器中：
立即学习“前端免费学习笔记（深入）”；
注意：touch-action 必须写在具体按钮上，写在 body 或通配符里无效，还可能破坏轮播图/列表滑动。
:active 样式被 :hover 或 :focus 覆盖
Chrome/Safari 点击后会自动给按钮加 :focus，如果 :focus 规则里设置了和 :active 冲突的 transform 或 background-color，视觉上就看不到按下反馈。
CSS 层叠顺序很关键：
正确写法示例：button { 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); }
用 background-color 做 :active 反馈基本无效
在强光屏、深色背景或小尺寸设备上，单靠颜色变深/变浅人眼几乎无法感知。真正有效的点击反馈依赖形变和光影变化——人眼对位置偏移和明暗梯度更敏感。
推荐组合：
过渡时间控制在 0.06s–0.1s：PC 可用 0.06s，移动端建议 ≥0.08s；太短像没响应，太长显得迟钝。
