纯css实现可信3d立体感的关键是box-shadow方向、transform位移与状态切换的物理一致性：顶部高光（浅色负偏移）必须写在前面，底部投影（深色正偏移）在后；:active时transform和box-shadow须同步变化，且transition仅限这两个属性。
纯 CSS 就能做出可信的三维立体感，关键不是加多少层阴影，而是 box-shadow 的方向、transform 的位移、以及状态切换时三者的物理一致性。
box-shadow 多层写法为什么必须分前后顺序
浏览器按从左到右顺序渲染 box-shadow 值，后写的会盖住前写的。顶部高光（浅色、负偏移）必须写在前面，否则会被底部投影（深色、正偏移）吞掉，整个凸起感就没了。
- 正确写法：
box-shadow: 0 -2px 0 2px #fff, 0 3px 6px rgba(0,0,0,0.15);—— 高光在前，投影在后 - 错误写法：
box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 -2px 0 2px #fff;—— 投影先画，高光被遮，按钮变“浮”而非“凸” - 深色背景上别用
rgba(0,0,0,0.5)这类纯黑阴影，改用rgb(50, 50, 60)或同色系暗化值，否则像割裂的刀痕
:active 状态下 transform 和 box-shadow 必须同步改什么
只改 background-color 或只加 opacity，用户根本感知不到“按下”。真实按压是视觉下沉 + 光影收缩，两个属性必须同时动，且方向一致。
-
transform: translateY(2px)—— 向下位移，模拟物理下沉（不是向上！） -
box-shadow要同步：垂直偏移增大（如0 4px→0 6px），模糊值加大（如4px→8px），高光减弱或移除 -
transition必须写在默认状态，且只锁定这两个属性：transition: transform 0.18s, box-shadow 0.18s;，写all会拖慢文字颜色等无关变化
移动端 :active 不触发的三个硬补救点
iOS Safari 和部分安卓 WebView 对 :active 支持极差，尤其用 <div> 代替 <code><button></button> 时几乎失效。这不是样式问题，是浏览器行为限制。
- 必须用语义化
<button></button>标签，不能用<div> 或 <code><a></a>模拟 - 加空属性
ontouchstart=""，绕过 300ms 点击延迟 - 加
style="touch-action: manipulation;"，告诉浏览器“这是操作控件，别缩放/滚动”
最容易被忽略的是阴影书写顺序和 :active 的位移方向——物理直觉比代码更重要；真机测试不能省，模拟器还原不了实际触控持续时间与位移量。
