为图片添加立体阴影需模拟真实光照：用多层box-shadow（近、远、环境光）配合display设置、父容器预留空间及transform上浮，并对透明图优先用drop-shadow。
给图片加有立体感的外部阴影，核心是让阴影看起来“脱离背景平面”，而不是简单贴着图片边缘浮一层灰。关键不在于参数堆得多，而在于模拟真实光照逻辑：有偏移、有模糊、有层次、有方向感。
用 box-shadow 搭配合理偏移与多层叠加
单层 box-shadow 往往显得扁平。真正有立体感的外部阴影，通常由两层或三层构成，分别模拟近处投影和远处柔光：
- 第一层（近阴影）：小偏移 + 小模糊，比如 0 2px 4px rgba(0,0,0,0.15)，紧贴图片下方，体现“刚离地”的距离
- 第二层（远阴影）：更大垂直偏移 + 更大模糊，比如 0 8px 16px rgba(0,0,0,0.1)，扩散更开，体现空气散射感
- 可选第三层（环境光弱影）：极淡、大范围，如 0 16px 32px rgba(0,0,0,0.05)，增强纵深
写法示例：box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1), 0 16px 32px rgba(0,0,0,0.05);
必须设 display 并预留空间
img 默认是 inline 元素，box-shadow 对它完全无效。不加这一步，其他都白调：
- 给图片加 display: block 或 display: inline-block
- 若图片在卡片或容器中，确保父容器没有 overflow: hidden——否则阴影会被裁掉
- 必要时在外层加 padding-bottom（比如 24px），为阴影留出物理空间
配合 transform 制造“上浮错觉”
纯阴影还不够“立体”，加上轻微位移就能激活视觉深度感知：
- 给图片加 transform: translateY(-2px)，让它微微“抬起来”
- 同时给它的父容器（比如一个 div.card）加 position: relative
- 再用 ::before 伪元素在父容器底层画一个偏移阴影：box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(4px);
这样人眼会自然解读为“图片悬空，底下有投影”，比单靠 box-shadow 更可信。
透明图用 drop-shadow 更贴形（但注意兼容性）
如果是 PNG 头像、图标等带 Alpha 通道的图片，想让阴影严格跟着轮廓走（比如圆形头像投出圆影，不是方块影），filter: drop-shadow() 是更精准的选择：
- 语法：filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
- 它按图像实际透明边缘生成阴影，不依赖 display 类型，inline 图片也能用
- 缺点：IE 完全不支持；不支持 inset 和多层逗号写法；旧版 Edge 需加 -webkit- 前缀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
