单层 box-shadow 无法体现真实光影层次，必须用多层模拟：第一层为软边框（0 0 0 1px rgba(0,0,0,0.05)），第二层为主投影（0 2px 4px rgba(0,0,0,0.1)），第三层为环境淡影（0 8px 16px rgba(0,0,0,0.08)），顺序不可颠倒；负 spread 可收束边缘提升“托起感”，hover 需配合 transform: translatey(-4px) 与增强阴影，且所有 rgba alpha 值不超过 0.15。
直接用单层 box-shadow 做卡片阴影，基本没法体现真实光影层次——它看起来是“贴”在页面上的，不是“浮”起来的。
多层 box-shadow 是必须的
真实光源会同时产生近处硬影、远处柔影和边缘描边感。CSS里靠逗号分隔多个阴影值来模拟：
- 第一层：微小偏移 + 零模糊 + 正 spread，比如
0 0 0 1px rgba(0,0,0,0.05)，本质是带透明度的“软边框”，贴合圆角不生硬 - 第二层：中等偏移 + 中等模糊，如
0 2px 4px rgba(0,0,0,0.1)，模拟主光源投射的清晰投影 - 第三层：大偏移 + 大模糊，如
0 8px 16px rgba(0,0,0,0.08)，模拟环境光扩散的淡影
顺序不能错：从内到外、从锐利到柔和。浏览器按书写顺序叠加，反了会导致外层遮盖内层细节。
spread-radius 的负值容易被忽略
很多人只用正 spread 扩大阴影，但负值能收束阴影边缘，让卡片底部投影更干净：
- 比如
0 4px 8px -2px rgba(0,0,0,0.1)，比0 4px 8px 0 rgba(0,0,0,0.1)更显“托起感” - 负 spread 对小尺寸卡片（如 badge、tag）特别有用，避免阴影虚胖
- 注意：blur 为 0 时，负 spread 会让阴影变成实线状，慎用于大元素
hover 动效必须配合 transform
只改 box-shadow 深度，视觉上还是“变重”，不是“抬升”。真正浮起需要位移：
- 默认状态用轻量阴影，如
0 2px 6px rgba(0,0,0,0.08) - hover 时加
transform: translateY(-4px)，同时把阴影改成0 6px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06) - transition 要写全：只过渡
box-shadow和transform，别用all，否则可能触发重排
最常被漏掉的是颜色透明度控制——所有 rgba() 的 alpha 值别超过 0.15，背景越亮，alpha 越要压低；否则阴影发灰、发脏，层次就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
