box-shadow 是模拟立体按钮厚度最可靠的纯 CSS 方案，通过多层内外阴影配合明暗与偏移制造深度感，需显式声明 transition-property 并兼顾 :hover 与 :active 状态。
button:hover 用 box-shadow 模拟厚度变化最可靠
纯 CSS 做立体按钮，box-shadow 是唯一能兼顾过渡平滑、浏览器兼容性和视觉可信度的方案。别碰 transform: scale() 或 border 增厚——前者只缩放不压重，后者在圆角下边缘撕裂，且无法实现“按下去凹陷”的错觉。
关键不是加阴影，而是用多层阴影配合颜色明暗和偏移方向制造深度感：
-
box-shadow第一层：内阴影inset 0 2px 4px rgba(0,0,0,0.1)模拟高光边缘 - 第二层：外阴影
0 4px 8px rgba(0,0,0,0.2)模拟按钮投下的“影子”，按下时减小该值 - 第三层（可选）：底部微弱内阴影
inset 0 -2px 2px rgba(255,255,255,0.3)强化顶部亮边
过渡必须锁定 box-shadow 和 background-color，其他属性（如 transform）一加就断帧。
transition-property 必须显式写死，不能用 all
用 transition: all 0.2s 看似省事，但实际会拖慢渲染——浏览器要监听所有属性变化，包括那些根本没变的（比如 font-size）。更糟的是，某些浏览器在 all 下对 box-shadow 过渡有插值 bug，导致阴影跳变或闪烁。
立即学习“前端免费学习笔记（深入）”；
正确写法只声明需要过渡的两个属性：
button {
transition-property: background-color, box-shadow;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
贝塞尔曲线选 cubic-bezier(0.4, 0, 0.2, 1) 是因为按钮按压需要“先快后慢”的物理感，比默认 ease 更真实。
:active 状态必须补上，否则移动端点击无反馈
桌面端靠 :hover 足够，但手机没有悬停概念。如果只写 :hover，iOS Safari 和 Android Chrome 在点击按钮瞬间不会触发任何样式变化，用户会以为没点中。
必须同时定义 :hover 和 :active，且两者阴影参数要一致（只是 :active 的外阴影偏移量略小、内阴影略深）：
-
:hover外阴影：0 3px 6px rgba(0,0,0,0.2) -
:active外阴影：0 1px 3px rgba(0,0,0,0.25)（看起来“沉下去”了） - 内阴影在
:active中加深：inset 0 1px 2px rgba(0,0,0,0.15)
注意：不要用 :focus 替代 :active，键盘聚焦和触控点击是两回事，语义和行为都不等价。
圆角按钮的阴影必须用 inset + offset 组合，不能只靠 blur
给 border-radius: 8px 的按钮加阴影时，如果只用 box-shadow: 0 4px 8px rgba(0,0,0,0.2)，阴影边缘会发虚、漂浮，像贴纸而不是实体按钮。问题出在模糊半径（blur）无法模拟真实物体的受光逻辑。
解法是把阴影拆成两段：
- 一个紧贴边缘的
inset 0 1px 0 rgba(255,255,255,0.4)（顶部高光） - 一个带偏移的外阴影
0 3px 6px -2px rgba(0,0,0,0.2)（负 spread 把阴影往里收，贴合圆角弧度）
负 spread 值（-2px）是关键——它让阴影轮廓收缩，避免圆角处出现“晕开”的毛边。Chrome 和 Safari 对负 spread 支持良好，Firefox 旧版可能略弱，但现代版本已无问题。
厚度感不是靠堆叠层数，而是每层阴影承担明确的光学角色：高光、本体投影、环境光遮蔽。少一层，就少一分真实感。
