button:active没反应需先确认是否被真正激活，ios safari要求元素明确声明交互意图（如用或加role="button"和tabindex="0"），并配合touch-action: manipulation、-webkit-tap-highlight-color: transparent等设置。
button:active 样式没反应？先确认它是否被真正激活
很多按钮写了 :active 却没反馈，不是语法错，而是浏览器压根没把它当可点击元素处理。iOS Safari 尤其严格：纯 <div class="btn"> 默认跳过 <code>:active，哪怕加了 onclick 也不行。
- 必须声明交互意图：用
<button></button>最稳妥；若用<div> 或 <code><a></a>，得同时加role="button"和tabindex="0" - 移动端默认有 300ms 延迟判断双击，
:active被卡住：在按钮选择器里加touch-action: manipulation - 禁用 iOS 灰色高亮层：加
-webkit-tap-highlight-color: transparent，否则先闪灰膜再变色，反馈被覆盖 - 确保父容器没设
pointer-events: none或overflow: hidden——后者会把缩放后的阴影或边缘裁掉 - 必加
transform: scale(0.96)或transform: translateY(1px)；缩放比位移更稳定，iOS 上translateY有时触发重排闪烁 - 配合
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); } } - 正确写法：
button { transform: scale(1); 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，低端安卓机卡顿明显；优先用transform和opacity（GPU 加速） - 时间控制在 0.06s–0.1s：PC 可用 0.06s，移动端建议 ≥0.08s，太短像没响应，太长反馈迟钝
- 别用
width/height/border-width动画——触发 layout thrashing，直接掉帧 - 触控区域是否 ≥48px：小于这个尺寸 iOS 会自动放大点击热区，但可能导致反馈错位或误触
- 检查开发者工具的 “Computed” 面板，看
transform缩放后实际渲染尺寸是否被父容器overflow: hidden裁切 -
:active规则必须写在:hover之后，否则权重不够被覆盖；用 Styles 面板勾选:active强制状态，看哪条样式被划掉
只改 background-color 几乎无效，人眼根本察觉不到
在强光屏、小尺寸设备或深色背景上，单靠颜色变深/变浅几乎无法感知“按下”。真正有效的反馈依赖形变和光影变化，因为人眼对位置和明暗梯度更敏感。
transition 写在 :active 里完全无效
:active 是伪类状态，不是动画钩子。过渡效果必须定义在常态选择器中，且所有要过渡的属性都得有明确初始值，否则浏览器无法插值。
移动端真机调试时最容易忽略的三件事
Chrome DevTools 的模拟器测不出真实触摸流，很多问题只在真机上暴露。
复杂点不在怎么写，而在验证路径——必须在 iOS Safari、Android Chrome、折叠屏等多环境实测，尤其关注首次触摸延迟和阴影裁切。
