button:hover 和 button:active 的阴影与位移必须分开控制：hover 仅加深阴影、微调颜色以示可交互，active 才执行 translateY(2px) 并移除 box-shadow；transition 必须写在默认状态，box-shadow 值需匹配位移量且避免过重或 inset，深色模式下需调整透明度，移动端需加 touch-action: manipulation 确保 active 生效。
button:hover 和 button:active 的阴影与位移必须分开控制
纯靠 :hover 模拟按下效果是错的——用户真正点击时（:active）才该触发位移和阴影消失。如果把位移写在 :hover 里，鼠标悬停但未点击就会“假按下”，体验失真。
-
:hover只负责加深阴影、微调颜色，暗示可交互 -
:active才执行transform: translateY(2px)+ 移除box-shadow - 必须给
transition写在默认状态（非:hover或:active），否则位移会突兀无动画
box-shadow 的深色值不是越黑越好
用 box-shadow: 0 4px 8px rgba(0,0,0,0.3) 比 rgba(0,0,0,0.6) 更可信——真实按钮按压时边缘变暗是漫反射衰减，不是全黑压印。过重的阴影会让按钮像陷进页面里，失去“按下去再弹回来”的物理反馈感。
- 推荐组合：
box-shadow: 0 2px 4px rgba(0,0,0,0.15)（常态）→0 1px 2px rgba(0,0,0,0.1)（:hover）→none（:active） - 避免用
inset阴影：它制造的是“凹陷”而非“按压”，和位移方向冲突 - 深色模式下注意
rgba(0,0,0,0.15)在浅灰背景上可能不够显，需同步调亮背景或改用rgba(0,0,0,0.2)
transform: translateY(2px) 的像素值要匹配阴影高度
位移量必须和常态阴影的垂直偏移（第一个数值）一致或略小，否则会露白边。比如阴影是 0 3px ...，位移就用 3px；若位移只写 1px，按钮底边会悬空，立体感断裂。
- 典型配对：
box-shadow: 0 3px 6px ...→transform: translateY(3px) - 别用百分比或
em：按钮高度变化时位移会失准 - 必须加
will-change: transform（可选但推荐）：避免部分浏览器渲染卡顿
移动端点击无响应？缺了 touch-action 和 active 伪类兼容
iOS Safari 和部分安卓浏览器默认忽略 :active，除非按钮有 touch-action: manipulation 或绑定空 ontouchstart。纯 CSS 方案里，:active 在触摸设备上常失效。
立即学习“前端免费学习笔记（深入）”；
- 强制启用：
button { touch-action: manipulation; } - 补救方案（不推荐但有效）：
button:active, button:focus:active { transform: translateY(3px); box-shadow: none; } - 真机测试时注意：Chrome DevTools 的 “Toggle device toolbar” 模拟不完全等价于真机，务必连真机验证
transition 加在元素默认状态里，导致点击时“啪”一下跳下去又弹回，根本不像按按钮。 
