:active伪类仅在按下瞬间生效，需用inset内阴影+transform缩放模拟下陷感，配合常态transition确保变化及时明显；非语义化元素须加role="button" tabindex="0"，移动端需touch-action: manipulation防300ms延迟。
:active 本身不“点击后”生效，它只在手指按住或鼠标按下那一帧存在；所谓阴影变化反馈，本质是靠 box-shadow 的即时收缩+变暗，配合 transform 缩放，骗过人眼的视觉暂留——单靠改颜色几乎没人看得出来。
button:active 里 box-shadow 怎么写才有效
直接写 box-shadow: none 或只调颜色，反馈会弱得像没点中。真正起作用的是「内凹感」：用 inset 配合位移和模糊衰减，模拟物理受压。
- 默认状态必须带外阴影表现“凸起”，例如：
box-shadow: 0 2px 6px rgba(0,0,0,0.15) -
:active中改用内阴影 + 微缩：box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.08) - 别省略
inset关键字——没有它，阴影方向反了，压根不显“下陷” - 所有涉及过渡的属性（包括
box-shadow）必须在常态选择器里声明transition，比如：button { transition: box-shadow 0.08s ease, transform 0.06s ease; }
为什么 shadow 变化总被忽略或失效
不是代码写错，而是浏览器根本没把你的元素当可激活对象，或者样式被覆盖/未重绘。
- 非语义化元素（如
<div class="btn">）默认不触发:active，必须加role="button" tabindex="0" - iOS Safari 默认等 300ms 判断双击，导致首次触摸延迟响应，加
touch-action: manipulation到按钮或父容器 -
:active规则被:hover覆盖——把button:active写在button:hover后面，权重才够 - 父容器设了
overflow: hidden，缩放后阴影被裁掉，检查开发者工具的 “Computed” 面板看实际渲染尺寸
移动端 shadow 按压反馈特别容易翻车的地方
真机测试时发现阴影不动？大概率是渲染层或触发机制没对齐。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-tap-highlight-color: transparent必加，否则 iOS 会盖一层半透明灰膜，盖住你精心设计的阴影 - 避免只用
transform: translateY()——某些安卓 WebView 会触发重排闪烁，优先用scale(0.98) - 阴影值不能含百分比或
em单位，必须用px或rem，否则部分老机型解析失败 - 如果按钮嵌在
position: fixed容器里，inset阴影可能错位，换用双层外阴影模拟（一层主投影，一层微偏移深色）
真正难的不是写出 :active，而是让那个“按下瞬间”的视觉变化，在各种设备上都足够快、足够准、足够可信——缩放和阴影必须同步，transition 必须写在常态里，而所有这些，都得在真机上摸着屏幕反复试三次才算数。
