box-shadow无法真正只渲染底部阴影，但可通过设垂直偏移为正、水平偏移为0、模糊半径4–8px、扩散半径0–2px，并配合img设display:inline-block或block来模拟；还需避免父容器overflow:hidden裁剪阴影。
box-shadow 本身不支持“只加底部阴影条”，但可以用一层带偏移的外阴影模拟出视觉上仅在图片下方出现的阴影效果——关键不是裁剪，而是控制参数让阴影自然沉底。
为什么直接写 box-shadow: 0 4px 6px rgba(0,0,0,0.15) 看起来像“底部阴影”
这不是真正只渲染底部，而是利用了人眼对明暗过渡的感知：水平偏移为 0（无左右扩散），垂直偏移为正值（向下），模糊半径适中（4px–8px），扩散半径为 0 或略正（如 2px），这样阴影主体集中在图片正下方，上下边缘快速衰减，视觉上就“贴底”了。
- 垂直偏移必须为正，比如
4px、6px；负值会让阴影往上跑，破坏底部感 - 模糊半径不宜过大（超过
12px易发散到左右，失去“条状”印象） - 扩散半径设为
0最安全；设为1px–2px可让阴影稍宽一点，更稳重 - 务必确保
img是display: inline-block或block，否则阴影根本不会渲染
img 必须先改 display，否则所有阴影都无效
这是最常被跳过的一步：img 默认是 display: inline，而 box-shadow 对纯 inline 元素完全不生效（CSS 规范限制）。不加这句，哪怕参数调得再准，页面也看不到任何阴影。
- 推荐用
display: inline-block：保留图文混排能力，且默认基线对齐（vertical-align: baseline）不会突兀抬高文字 - 如果图片独占一行或需居中，用
display: block更稳妥 - 加了
inline-block后，若发现文字被顶高，补一句vertical-align: middle即可
想让阴影更“立体”？加一层浅色高光模拟环境光
单层阴影容易显得沉闷。叠加一个轻微上浮的浅色阴影，能立刻增强底部支撑感和空间层次——这不是画蛇添足，而是模仿真实光照逻辑。
- 第二层阴影用负垂直偏移（如
-2px）、小模糊（2px）、高透明度浅灰或白：box-shadow: 0 6px 8px rgba(0,0,0,0.12), 0 -2px 4px rgba(255,255,255,0.4) - 注意顺序：先写的阴影在下层，后写的在上层；高光必须写在后面，否则会被主阴影盖住
- 移动端慎用两层以上阴影，滚动时可能掉帧
阴影被父容器“吃掉”？检查 overflow: hidden
如果阴影突然消失，大概率是图片外层的 div 或 figure 设置了 overflow: hidden，而阴影区域超出了该容器边界，被裁剪掉了。
- 临时排查：给父容器加
outline: 1px solid red，看阴影是否落在 outline 外面 - 修复方式：要么去掉父容器的
overflow: hidden，要么给它加足够padding-bottom（至少等于阴影垂直偏移 + 模糊半径的一半） - 不要依赖
margin-bottom来“腾空间”——它不扩大容器内容区，照样裁剪阴影
box-shadow，而是记住：它永远依赖元素的渲染模式、父容器的盒模型约束，以及人眼对明暗位置的直觉判断。参数调得再细，漏掉 display: inline-block 或被 overflow: hidden 截断，效果就归零。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
