实现按钮立体感的关键是精准调控box-shadow的x/y偏移、模糊度与扩散值比例：常态微下偏+小扩散，悬停加大模糊并加内阴影提亮，按下则y偏移为负且内阴影加深。
box-shadow 实现按钮立体感的关键参数组合
纯靠 box-shadow 做出“按下去”和“浮起来”的视觉差，核心不是加多层阴影，而是控制 x-offset、y-offset、blur-radius 和 spread-radius 的比例关系。默认的均匀阴影（比如 box-shadow: 0 4px 8px rgba(0,0,0,0.2)）只像浮空，不像可按压。
- 正常状态：用轻微下偏移 + 小扩散（
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 1px 2px -1px rgba(0,0,0,0.1)），模拟自然光下微凸 - 悬停状态：y-offset 减小甚至归零，blur 加大，同时加一层内阴影（
inset）强化凹陷错觉，例如box-shadow: 0 1px 6px -1px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.4) - 按下状态（
:active）：y-offset 变负（如-2px），外阴影弱化，内阴影加深（inset 0 2px 4px rgba(0,0,0,0.2)），模拟物理下压
为什么 hover 时阴影变“虚”反而更立体
人眼判断物体高度，依赖的是边缘模糊度与位移量的匹配。如果 hover 时只把 y-offset 改成 0，但 blur-radius 不变，会显得按钮“飘在半空没动”。真正可信的悬浮，是让阴影从“有方向的投射”过渡到“弥散的环境光”，所以 blur 要加大，同时透明度略提（rgba(0,0,0,0.15) → 0.25），配合 inset 白边增强表面反光感。
- 常见错误：hover 时只改
transform: translateY(-2px)，不调阴影 —— 这会让按钮像被拎起来，而非自身隆起 - 兼容性注意：IE11 不支持多层
box-shadow中的inset混用，若需支持，hover 状态可退化为单层外阴影 +transform - 性能提示：避免在
box-shadow中使用过大的blur-radius（>24px）或高斯迭代次数，尤其在移动端滚动区域里
:active 状态下 box-shadow 的三个易漏细节
按钮被点击的瞬间，视觉反馈必须比 hover 更强、更短促，否则用户会觉得“没点上”。但很多人只加 transform 或改背景色，忽略阴影的协同变化。
- 外阴影 y-offset 必须为负值（如
-1px或-2px），表示按钮嵌入容器表面 - 必须叠加
inset阴影，且颜色要比默认状态更深（rgba(0,0,0,0.3)而非0.1），模拟受压后边缘暗化 - 动画要设
transition: box-shadow 0.1s ease，不能依赖全局 transition —— 否则阴影变化会和其他属性（如 background-color）抢缓动节奏，导致卡顿感
深色背景上 box-shadow 发灰/看不见怎么办
阴影本质是透明度叠加，在深底色上，rgba(0,0,0,0.2) 会显得发灰无力，甚至不可见。这不是 bug，是色彩混合的必然结果。
- 解决方案不是调亮阴影，而是换参考系：用
rgba(255,255,255,0.1)搭配inset做“提亮边缘”，再配一层极淡的深色外阴影（rgba(0,0,0,0.05)）维持深度感 - 避免直接用
hsl()或hex写阴影色 —— 无法响应主题切换；推荐用CSS custom property统一管理，例如--shadow-light: rgba(255,255,255,0.1); --shadow-dark: rgba(0,0,0,0.05) - 检查是否意外启用了
prefers-reduced-motion，某些系统级设置会强制禁用所有box-shadow动画，此时需用@media (prefers-reduced-motion: reduce)提供静态 fallback
box-shadow，而是让每个状态之间的过渡，在不同屏幕亮度、不同缩放比例下，都保持“它看起来就是能按下去”的直觉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
