:active伪类不触发的根本原因是浏览器默认不将div/span等非可点击元素识别为激活目标，尤其在ios safari和部分安卓webview中；必须使用语义化button、role="button" tabindex="0"、cursor: pointer或viewport meta标签等手段显式声明可点击性。
:active伪类为什么有时不触发点击凹陷
根本原因不是写法错，而是浏览器默认不把它当“可点击元素”处理。特别是用 div 或 span 模拟按钮时，iOS Safari 和部分安卓 WebView 会直接忽略 :active，连 300ms 延迟都不会给——压根不响应。
- 必须用语义化
<button></button>，或至少加role="button" tabindex="0" - 移动端强制启用：在元素上加
cursor: pointer，某些安卓浏览器靠这个“认出”可点击行为 - 全局提速：在
加<meta name="viewport" content="width=device-width, initial-scale=1">，禁用双击缩放能显著提升:active触发率 - 别在 JS 里无脑
event.preventDefault()——它会截断原生点击流，导致:active一闪而过甚至不生效
box-shadow inset 凹陷效果怎么配才不假
纯改 border 或只用单层 inset 阴影，看起来像“被挖掉一块”，不是“按下去”。真实物理按键下陷依赖明暗过渡，得靠两层方向相反的 inset 阴影模拟高光与暗部。
- 必写
inset：漏掉这个词就变成外阴影，完全无效 - 推荐组合：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), inset 0 -1px 2px rgba(255,255,255,0.5) - 深色模式下要单独覆盖：
@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); } } - 避免透明度 > 0.6，否则盖住底色；
blur值建议为offset的 1–1.5 倍，过渡才自然
transform + box-shadow 组合为什么比单用位移更可信
只写 transform: translateY(2px)，按钮像“掉下去”而不是“压下去”——缺少受力压缩感。真实按键被按压时，表面微缩、边缘收窄、中心微凹，CSS 里得靠缩放+阴影配合模拟。
- 向下位移必须配微缩：
transform: scale(0.98) translateY(1px)，不能只位移 - 过渡必须限定属性：
transition: transform 0.1s, box-shadow 0.1s，写all会拖慢反馈，尤其颜色变化容易卡顿 - 别在
:active里改border-width：哪怕 ±1px 都可能触发 layout thrashing，改用box-shadow模拟边框感更安全 - 测试重绘范围：Chrome DevTools → Rendering → “Paint flashing”，按下时大面积闪绿说明重绘区域过大，需优化
移动端 fallback 到 JS 的临界点在哪
当项目要求 100% 确保点击反馈（比如支付确认按钮），或者需要长按态、多点触控支持时，:active 就不够用了。这时候必须用 JS 监听 touchstart/touchend，动态切换类名。
- 关键约束：不要同时写
.btn:active和.btn.is-pressed，iOS 可能叠加触发两次样式变化 - JS 只负责增删类，样式全由 CSS 控制：
.btn.is-pressed { transform: scale(0.97) translateY(1px); box-shadow: ... } - 记得清除
touchend后的类，否则松手后状态残留；也要监听touchcancel防止中断未清理 - 如果按钮有
overflow: hidden或父容器有clip-path，内阴影会被裁切——这是最容易被忽略的渲染陷阱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
