为实现多重阴影需先设display: block或inline-block，否则box-shadow无效；多层阴影按书写顺序从下到上渲染，应合理设置rgba透明度、偏移与模糊值以模拟真实光照立体感，并注意圆角/透明图需用drop-shadow或overflow:hidden配合。
直接给 <img> 加多层 box-shadow 就能实现多重阴影，但必须先设 display: block 或 display: inline-block，否则所有阴影参数都白配。
为什么写了逗号分隔的多层阴影却只看到一层
最常见原因是颜色不透明或层级顺序反了：浏览器按书写顺序从下到上渲染，写在前面的阴影在底层，写在后面的在上层。如果上层用了 rgba(0,0,0,1) 或纯黑 #000，就会完全盖住下面的阴影。
- 统一用
rgba()控制透明度，比如rgba(0,0,0,0.08)、rgba(0,0,0,0.12)、rgba(0,0,0,0.05) - 避免所有层都用相同
v-offset，例如全写0 4px—— 这会让多层视觉上“叠成一层” - 调试时临时把某一层颜色改成亮色（如
red），确认它是否真的被渲染出来了
怎么写才像真正有立体感的多重阴影
真实光照下阴影不是均匀扩散的：近处清晰、远处发散、边缘柔和。模拟这个逻辑比堆参数更重要。
- 第一层（底层）：
0 2px 4px rgba(0,0,0,0.1)—— 小偏移 + 小模糊，紧贴图片底部，体现“刚离地” - 第二层（中层）：
0 6px 12px rgba(0,0,0,0.12)—— 偏移加大 + 模糊加宽，模拟空气散射 - 第三层（顶层，可选）：
0 12px 32px rgba(0,0,0,0.05)—— 大偏移 + 大模糊 + 极低透明度，增强纵深感 - 注意：三层已接近实用上限；iOS Safari 在滚动中渲染超过三层高模糊阴影可能掉帧
图片带圆角或透明背景时，多重阴影还可靠吗
box-shadow 只认盒模型轮廓，不管图片内容是否透明或圆角 —— 所以它永远投出矩形阴影。想让阴影贴合 PNG 头像的圆形边缘，得换方案。
- 如果图片是
border-radius: 50%的头像，且父容器没设overflow: hidden，那box-shadow投出来的还是方影，和圆图不匹配 - 此时应改用
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2))，它按 Alpha 通道生成阴影，圆形头像就投圆影 - 但注意：
drop-shadow()不支持逗号分隔的多层写法，也不支持inset，IE 完全不支持，旧 Edge 需加-webkit-前缀 - 更稳妥的混合策略：圆角图用
box-shadow+ 父容器overflow: hidden裁出视觉圆影；透明图优先试drop-shadow，再 fallback 到box-shadow
多重阴影不是层数越多越好，关键在每层的偏移、模糊、透明度是否形成逻辑递进；最容易被忽略的是 display 设置和父容器的 overflow 状态 —— 这两个问题不解决，后面所有参数调得再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
