button:active没反应是因为iOS Safari仅对明确声明交互意图的元素触发该伪类，需用<button>或为<div>添加role="button"和tabindex="0"，并配合touch-action:manipulation、-webkit-tap-highlight-color:transparent及transform/box-shadow等视觉反馈属性，且transition必须定义在常态选择器中。
button:active 样式没反应，不是写错了，而是浏览器压根没把它当可点击元素处理。
为什么 :active 在移动端完全不触发
iOS Safari 默认跳过非语义化元素的 :active，哪怕加了 onclick 也不行。它只对明确声明“可交互意图”的元素响应：
- 用
<button>最稳妥；若必须用<div>或<a>，得同时加role="button"和tabindex="0" - 没加
touch-action: manipulation，iOS 会等 300ms 判断双击，:active被卡住不激活 - 父容器设了
pointer-events: none或overflow: hidden，触摸事件传不到目标，或缩放后阴影被裁掉
真正有效的按压反馈靠什么
单靠 background-color 变深/变浅，人眼在强光屏、小尺寸设备或深色背景下几乎无法感知。有效反馈依赖形变和光影变化：
- 必加
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); } }
transition 写在哪才生效
: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); } - 避免
transition: all——颜色变化触发 repaint，低端安卓机明显卡顿 - 时间控制在 0.06s–0.1s：PC 可用 0.06s，移动端建议 ≥0.08s；太短像没响应，太长反馈迟钝
- 别用
width/height/border-width动画——触发 layout thrashing，直接掉帧
真机调试最容易翻车的细节
Chrome DevTools 的设备模拟器测不出真实触摸事件流，这几个点必须上真机验证：
- 触控区域是否 ≥48px —— 小于这个尺寸 iOS 会自动放大点击区域，但可能误触或反馈错位
-
-webkit-tap-highlight-color: transparent必加，否则 iOS 先闪一层半透明灰膜，盖住你设计的阴影 -
:active规则是否写在:hover后面——否则权重不够，样式被覆盖（LVHFA 顺序） - 阴影值不能含百分比或
em单位，必须用px或rem，否则部分老机型解析失败
最难的不是写出 :active，而是让那个“按下瞬间”的视觉变化，在各种设备上都足够快、足够准、足够可信——缩放和阴影必须同步，transition 必须写在常态里，而所有这些，都得在真机上摸着调。
