用多层 box-shadow 错位叠加模拟按钮厚度：深色阴影在前、浅色在后，控制模糊半径（2–4px）、垂直偏移（上负下正）及颜色明暗联动；悬停与点击需同步更新所有阴影层并配合缩放和 touch-action 优化。
用 box-shadow 叠加实现按钮厚度感，不是加一层就完事
单层 box-shadow 只能拉出扁平投影，真正有“厚度”的 3D 感必须靠多层阴影错位叠加：上边浅色（模拟高光）、下边深色（模拟背光）、左右微偏（强化立体方向）。浏览器渲染时会按声明顺序从下往上堆叠，所以深色阴影要写在前面，浅色压顶层。
-
box-shadow的第 3 个参数（模糊半径）别设太大，2–4px 足够，否则边缘发虚，失去“硬朗厚度” - 垂直偏移量（第 2 个参数）是关键：上阴影用负值（如
-2px），下阴影用正值（如4px），差值越大，看起来越“凸” - 避免用
inset混合外阴影——它会干扰深度层次，容易让按钮像被挖进去而不是顶出来
按钮悬停时的光影变化必须同步更新所有阴影层
只改背景色或边框色，不调整阴影，悬停就会显得“脱节”。人眼对明暗关系比颜色更敏感，高光变亮、背光加深、偏移微调，三者要联动。
- 悬停时把顶部高光阴影的
color调得更浅（比如从#fff到rgba(255,255,255,0.8)），同时加深底部阴影（rgba(0,0,0,0.3)→rgba(0,0,0,0.45)） - 可以微调垂直偏移：比如常态下是
0 2px，悬停改成0 1px，制造“被按下去一点”的错觉 - 千万别只加
transition: background-color .2s—— 必须显式写出transition: box-shadow .2s, background-color .2s，否则阴影跳变
移动端点击反馈不能只靠 :active，得补一层视觉压缩
触摸屏没有鼠标悬停，:hover 在很多手机上不触发；而单纯用 :active 又太短暂、难感知。需要在按下瞬间模拟“受力凹陷”，靠反向阴影+缩放完成。
-
:active状态下：把顶部高光阴影去掉，底部阴影加粗（6px垂直偏移 + 更高透明度），再加transform: scale(0.98) - 注意
transform会触发新图层，但纯缩放影响极小，比用top/left位移更稳定 - iOS Safari 对
:active有 300ms 延迟，务必加touch-action: manipulation到按钮上
IE 和旧版 Safari 不支持多层 box-shadow？那就降级为单层+边框
IE10+ 其实支持多层，但 IE9 及更早版本只认第一个；老 Safari（
立即学习“前端免费学习笔记（深入）”；
- 基础层：保留一层合理偏移的
box-shadow: 0 2px 4px rgba(0,0,0,0.2)，所有浏览器都认 - 增强层：用
@supports (box-shadow: 0 0 0 #000)包裹多层声明，现代浏览器才加载 - 别忽略边框：
border: 1px solid rgba(0,0,0,0.1)在降级时能维持结构感，比纯无边框强得多
