box-shadow加translatey能模拟按下效果，本质是通过元素下沉与阴影变厚变柔协同营造深度变化：translatey使按钮视觉下陷，box-shadow增大垂直偏移和模糊半径强化受压感，二者须同步反向协调，且transition需写在默认状态以确保缓动自然。
为什么 box-shadow 加 translateY 能模拟按下效果
按钮“按下去”的视觉反馈，本质是让用户感知到深度变化：按下时表面下沉、边缘阴影变厚变柔。CSS 中 translateY(2px) 让按钮向下位移，模拟凹陷；同时增大 box-shadow 的垂直偏移（如 0 4px 6px）和模糊半径，强化受压阴影——两者配合，比单用背景色变化更可信。
关键点在于：位移和阴影必须同步、反向协调。比如按钮默认 box-shadow: 0 2px 4px rgba(0,0,0,0.2)，按下时变成 box-shadow: 0 1px 2px rgba(0,0,0,0.1) 并加 translateY(1px)，反而像“弹起”。正确做法是让阴影的 y 值变大、模糊变强，同时元素本身下沉。
实现点击按压态的 CSS 写法要点
直接用 :active 伪类是最简方案，但要注意几个易错细节：
-
transition必须写在默认状态（非:active），否则按下瞬间无缓动，显得生硬；推荐写transition: transform 0.1s, box-shadow 0.1s; -
transform: translateY(2px)和box-shadow: 0 4px 8px rgba(0,0,0,0.25)需成对出现，且数值要匹配——translateY值越大，阴影的y偏移也应越大 - 别忘了重置
border或outline，某些浏览器在:active下会加默认轮廓，破坏 3D 感 - 移动端需加
-webkit-tap-highlight-color: transparent;，否则点击闪白
示例代码片段：
.btn {
padding: 10px 20px;
background: #4a90e2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn:active {
transform: translateY(2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
移动端真机上按不下去？检查这三点
很多开发者写完在桌面 Chrome 看着正常，一上手机就失效——根本原因不是 CSS 错，而是事件触发机制不同。
- iOS Safari 默认禁用非可点击元素的
:active，确保按钮是<button></button>或带role="button"的<div>，且有 <code>cursor: pointer和user-select: none - 部分安卓 WebView 忽略
:active除非元素监听了touchstart，简单补一句ontouchstart=""在标签上即可激活（如<button ontouchstart=""></button>） - 避免在父容器设
pointer-events: none或touch-action: manipulation过度限制，后者会吞掉:active生命周期 - 把
transition改成transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.15s;，用缓动函数模拟弹性 - 松开后加轻微上浮（
:active结束后自动恢复），可配合will-change: transform提升渲染帧率 - 如果按钮有图标，建议对图标也加
transform: scale(0.95)，形成整体压缩感，而非仅文字下沉
想更真实？加一点微交互细节
基础按压只是起点。真正有质感的按钮，会在松开瞬间带一点“回弹”或“余震”感：
这些细节不增加复杂度，但用户手指一碰就能感知差异。最常被忽略的是：阴影的透明度变化比大小变化更重要——按下时 rgba(0,0,0,0.3) 比 rgba(0,0,0,0.2) 更显“压入”，哪怕其他参数全一样。
