最轻量且兼容性最好的按压效果是为:active伪类添加transform: translatey(1px)并配合transition: transform 0.1s ease；需注意移动端延迟、多属性过渡声明、禁用态处理及dpi适配。
按钮点击时用 transform: translateY() 模拟按压效果
直接加 transform: translateY(1px) 到 :active 伪类，是最轻量、兼容性最好的方式。它不触发重排，性能比改 top 或 margin 高得多，所有现代浏览器（包括 iOS Safari）都支持。
- 必须配合
transition才有缓动，否则是瞬移：写成transition: transform 0.1s ease，别漏了ease，否则默认是ease但显式写出更可控 -
:active在触摸设备上持续时间极短（约 100ms），如果没配touch-action: manipulation，iOS 可能延迟响应或不触发 - 别在
:active里同时改background-color和transform却只给一个transition属性——要么写全transition: background-color 0.1s, transform 0.1s，要么统一用transition: all 0.1s（不推荐all，易误触其他属性）
为什么不用 box-shadow 内阴影模拟按压
有人用 inset 阴影“往里缩”，但这是错觉——它没改变按钮实际占位，视觉下沉感弱，且和真实按压的形变逻辑相反。更重要的是：box-shadow 动画性能远不如 transform，尤其在低端安卓机上容易掉帧。
- 内阴影无法表达“被按下”的空间压缩感，用户感知弱
-
box-shadow变化会触发重绘（paint），而transform只走合成层（composite），GPU 加速更稳 - 若同时用
transform+box-shadow，务必把box-shadow的过渡也单独声明，否则只有transform动
:active 在移动端失效或延迟的常见原因
iOS Safari 默认有 300ms 点击延迟，且 :active 样式可能不触发；Android 某些 WebView 会忽略未绑定事件的元素的 :active。根本解法不是加 JS 监听，而是用 CSS 规则兜底。
- 给按钮加
cursor: pointer，部分 Android 浏览器靠这个识别可点击态 - 确保元素有
onclick="void(0)"或绑定任意事件（哪怕空函数），iOS 才认:active - 更稳妥：用
touchstart/touchend切换一个 class（如.is-pressed），CSS 写.btn.is-pressed { transform: translateY(1px); }，绕过:active兼容黑洞
压下距离设多少像素才自然
2px 太重，0.5px 几乎看不出。实测 1px 是平衡点：人眼可辨，又不破坏按钮比例。但要注意，这个值要和按钮高度、边框粗细匹配——高大按钮（48px+）可到 1.5px，小图标按钮（24px）建议压 0.8px。
- 别写死
transform: translateY(1px)，用transform: translateY(calc(1px * var(--scale, 1)))配合媒体查询动态缩放，适配高 DPI 屏 - 如果按钮有
border-radius，压下时建议同步微调border-radius（比如减 0.2px），强化“受力变形”感，但幅度必须小，否则像抖动 - 禁用状态（
disabled）下:active不生效，记得单独写.btn:disabled:active或用 class 控制，否则用户点不动还看到“压下”效果，体验错乱
压下效果看着简单，真正难的是让不同设备、不同 DPI、不同交互方式（点、按、长按）下反馈一致。最常被忽略的，是把 :active 当作纯视觉装饰，却忘了它本质是用户操作意图的即时确认——延迟、跳变、不触发，都会悄悄削弱信任感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
