卡片式按钮需同时满足视觉凸起感、状态可感知、移动端真机可触发三条件；须用双层box-shadow（高光在前、投影在后）、transform与阴影反向协同变化、transition明确指定属性，并确保语义化button或ontouchstart激活移动端:active。
卡片式按钮不是“加个阴影+圆角”就完事
真正像实体卡片一样可点击、有按压反馈的按钮，必须同时满足三个条件：视觉凸起感、状态可感知、移动端真机可触发。只写 box-shadow: 0 4px 12px rgba(0,0,0,0.1) 和 border-radius: 8px，结果是按钮浮在页面上，像一张贴纸——它没“立”起来，更不会“陷”下去。
:active 状态下 translateY 和 box-shadow 必须反向协同
按下时按钮下沉，阴影却变浅变小，用户会感觉按钮被“拎起来”而不是“按下去”。物理直觉错了，交互就失效。
-
transform: translateY(2px)是向下位移（正值），不是向上 - 对应
box-shadow的垂直偏移（第二个值）必须同步增大，比如从0 2px 4px变成0 4px 8px - 模糊半径（第三个值）也要加大，强化受压扩散感；别只改透明度或颜色
- 过渡必须写在默认状态：
transition: transform 0.18s, box-shadow 0.18s，不能只写all
双层 box-shadow 才能模拟真实光源方向
单层阴影永远做不出立体轮廓。浏览器按书写顺序渲染，高光必须在前、投影在后，否则会被盖住。
- 顶部高光用浅色负偏移：
0 -2px 0 2px #fff（注意是-2px） - 底部投影用深色正偏移：
0 3px 6px rgba(0,0,0,0.15) - 完整写法：
box-shadow: 0 -2px 0 2px #fff, 0 3px 6px rgba(0,0,0,0.15) - 顺序不能颠倒，否则高光被投影盖掉，按钮立刻“塌”了
移动端 :active 不触发？不是 CSS 写错了
桌面预览正常，手机点不动，90% 是事件机制问题，不是样式没生效。
立即学习“前端免费学习笔记（深入）”；
- 优先用语义化
<button>，别用<div>+onclick - 若必须用
<div>，加空属性ontouchstart=""激活 iOS Safari 的 :active - 父容器设了
overflow: hidden？:active 时box-shadow向上偏移会被裁掉半截，检查并改为overflow: visible或留足 padding - 真机测试比 DevTools 模拟器可靠得多——:active 在真机上持续时间极短，数值稍大就感知不到
最容易被忽略的是阴影顺序和位移方向：写反了就变成“弹起来”，而不是“按下去”。物理直觉比代码更重要。
