要配出立体按压感，关键是在按下时让阴影“变短变实”、松开时“拉长变虚”：默认用两层box-shadow（内高光+外投影），:active时减小外阴影偏移与模糊值、上移内阴影，并配合≤3px的translateY和统一transition。
box-shadow 怎么配出立体按压感
关键不是加阴影，而是让阴影在按下时「变短变实」、松开时「拉长变虚」。默认状态用两层 box-shadow：一层内阴影模拟高光（inset 0 2px 0 #fff），一层外阴影模拟底部投影（0 4px 8px rgba(0,0,0,0.2)）。按下时把外阴影的垂直偏移减到 2px，模糊值降到 4px，同时内阴影上移变成 inset 0 1px 0 #fff——这样按钮看起来就「陷下去」了。
:active 里 translateY 要不要加
加，但必须配合 transition 且位移量要克制。只用 transform: translateY(2px) 会让按钮视觉下沉，但若不控制过渡节奏，会显得生硬或延迟。建议统一写在默认状态：transition: all 0.1s ease，然后在 :active 中同时改 box-shadow 和 transform。注意：不要对 transform 单独设 transition，否则和阴影不同步；也不要位移超过 3px，否则像跳帧。
为什么按钮按下去没反馈？常见漏点
容易忽略的三个地方：
-
:active伪类在触摸设备上可能不触发，需补:focus:active或监听touchstart - 父容器有
overflow: hidden，把下压时的阴影裁掉了 - 按钮用了
border: none但没重置outline，导致聚焦时 outline 覆盖了阴影效果 - 背景色太浅（比如纯白），内阴影
inset 0 2px 0 #fff完全不可见
兼容性与性能提醒
box-shadow 和 transform 在 IE10+、所有现代浏览器都支持，但 IE10 不支持多层 box-shadow 同时过渡，所以如果必须兼容 IE10，得降级为单层阴影 + translateY。性能上，transform 和 box-shadow 都是 GPU 加速属性，但别在大量按钮上同时触发——尤其是带 transition 的 :active，滚动中快速点击可能卡顿。真要高性能，可加 will-change: transform，但仅限高频交互按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
