真正有效的按钮凹陷反馈必须靠inset内阴影+transform微位移/缩放+显式transition三者配合，且需确保css顺序正确、移动端touch-action和高亮层处理到位。
直接结论：仅靠 :active 写个背景色变化或单层 box-shadow，用户几乎感知不到“凹陷”——真正有效的反馈必须靠 inset 内阴影 + transform 微位移/缩放 + 显式 transition 三者配合，且顺序、权重、移动端适配缺一不可。
button:active 没反应？先查是否被覆盖或禁用
很多按钮点下去像没点中，不是代码写错，而是 :active 根本没生效：
- 检查 CSS 声明顺序：必须是
button→button:hover→button:active→button:focus，否则:hover或通用规则会覆盖:active - 打开浏览器开发者工具，按住按钮观察元素上
:active是否打勾；不打勾说明被屏蔽 - 移动端常见干扰：父容器写了
touch-action: none，或按钮本身没设cursor: pointer，iOS Safari 就直接跳过:active - 非
<button></button>元素（如<div>）需同时加 <code>role="button"和tabindex="0"，否则部分 WebView 完全忽略:activebox-shadow: inset 怎么写才真有“下陷感”
漏掉
inset关键字，或者只写单层模糊阴影，效果等于没有：- 常态按钮必须带外阴影营造“凸起”感，例如：
box-shadow: 0 2px 6px rgba(0,0,0,0.15) -
:active中改用双层inset：一层模拟顶部压暗（inset 0 -2px 4px rgba(0,0,0,0.15)），一层模拟底部提亮（inset 0 1px 2px rgba(255,255,255,0.5)） - 避免
box-shadow: inset 0 0 4px ...这种无方向的写法——它看起来像被挖空，不是被按下 - 深色模式下必须单独覆盖：
@media (prefers-color-scheme: dark) { .btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 2px rgba(255,255,255,0.1); } }
transform 为什么不能只写 translateY
只加
transform: translateY(2px)，按钮像掉下去，不是按下去：- 真实物理按键受压时表面微缩、边缘收窄，所以推荐组合：
transform: translateY(1px) scale(0.98) - 别用
border-width变化模拟收缩——触发 layout thrashing，重绘慢；box-shadow模拟边框更安全 -
transition必须限定属性：transition: transform 0.08s ease, box-shadow 0.08s ease；写all容易卡顿，尤其颜色变化 - 时间控制在 0.06s–0.1s：太长反馈迟钝，太短像没响应；PC 端可略快，移动端建议 ≥0.08s
移动端点击延迟导致 feedback 滞后？这三件事必须做齐
iOS Safari 和部分安卓浏览器默认有 300ms 延迟，并附带灰色高亮层，直接盖掉你的
:active效果：- 禁用默认高亮：
-webkit-tap-highlight-color: transparent - 防文字选中干扰：
user-select: none（记得加-webkit-前缀） - 强制启用点击态：
touch-action: manipulation加在按钮上，或全局加在 - viewport meta 不可省：
<meta name="viewport" content="width=device-width, initial-scale=1">，否则某些 WebView 根本不触发:active
最容易被忽略的是：所有过渡属性（
transform、box-shadow）必须在常态选择器里提前声明transition，而不是只写在:active里；另外，:active是瞬态伪类，无法用 JS 主动触发，也不能靠它维持状态——它只存在于“按下那一帧”。 - 常态按钮必须带外阴影营造“凸起”感，例如：
