:active伪类按不下去是因为触发时间极短且易被覆盖，需配合transform+box-shadow过渡动画实现真实压感；移动端需touch-action: manipulation，ie需tabindex和filter降级，复杂交互建议js接管。
active 伪类为什么按不下去？
直接写 :active 却没压感，大概率是被其他样式覆盖了，或者触发条件不对。浏览器只在鼠标按下（或触摸开始）到松开前那一瞬间应用 :active，时间极短，纯靠它做“按压”效果几乎不可见——必须配合 transform、box-shadow 和过渡动画才能形成视觉反馈。
- 确保没有更高优先级的
:hover或内联样式强行重置transform或box-shadow - 移动端需额外加
touch-action: manipulation，否则 iOS Safari 可能延迟或跳过:active -
:active不会冒泡，也不能用 JavaScript 监听，别试图用onclick模拟它来“增强”按压感
用 transform + box-shadow 做真实按压位移
物理按钮按下时会下沉、边缘阴影变厚变近——这得靠两个属性联动：transform: translateY(2px) 模拟下沉，box-shadow 改为更短的模糊半径和更小的偏移，让阴影“贴住”按钮底边。
button {
padding: 12px 24px;
border: none;
background: #4a6fa5;
color: white;
border-radius: 6px;
transition: transform 0.1s, box-shadow 0.1s;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
button:active {
transform: translateY(2px);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
- 过渡时间建议 ≤ 0.15s，太慢像卡顿，太快人眼难捕捉
- 不要只改
transform而忽略box-shadow，单侧变化会让按钮看起来“悬空”而非“下压” - 避免用
scale缩放模拟按压，会挤压文字、破坏布局流
兼容老浏览器的降级方案
IE11 及更早版本不支持 :active 在非 <a></a> 元素上生效（除非加 tabindex），且不支持 transform 过渡。真要兼容，得用 JS 补丁。
- 给按钮加
tabindex="0"，让 IE 触发:active - 对 IE11 用
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85)做简单透明度反馈（仅作 fallback） - 现代项目建议直接放弃 IE，但若必须支持，用
@supports (transform: translateY(0))包裹高级样式，避免污染基础渲染
移动端 touchstart/touchend 的干扰问题
在 iOS Safari 上，:active 默认有约 300ms 延迟，且可能被 click 事件打断。如果按钮绑了 onclick，松手瞬间样式会闪回，压感断裂。
- 加
cursor: pointer强制触发:active（部分安卓机型需要） - 避免同时监听
touchstart并手动加 class，否则和:active冲突，导致双倍位移或无法恢复 - 真正要精细控制，就弃用
:active，改用ontouchstart/ontouchend切换 class，但代价是增加 JS 维护成本
:active、什么时候必须用 JS 接管——尤其当按钮嵌套在滚动容器里，或同时响应 drag 事件时，:active 会悄无声息地失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
