box-shadow 控制图片阴影需包裹容器或设 display: block；水平/垂直偏移由前两参数决定；单侧阴影用负 spread 配合偏移模拟；多层阴影加 transform 可增强立体感；注意兼容性、响应式及高 dpr 适配。
用 box-shadow 控制图片阴影的水平/垂直偏移
图片本身不支持原生阴影定位，必须包裹在块级容器中（如 <div>）或直接对 <code><img> 设置 display: block 后才能生效。关键参数是 box-shadow 的前两个长度值：box-shadow: h-offset v-offset blur spread color。比如 box-shadow: 8px 4px 6px rgba(0,0,0,0.3) 表示阴影向右偏移 8px、向下偏移 4px。
常见错误是直接给 <img> 加 box-shadow 却没设 display，导致阴影被行内布局截断或完全不可见；另一个坑是忘记设置 border-radius 或 overflow: hidden，当图片带圆角时阴影仍为矩形，视觉上错位。
让阴影只出现在图片某一侧（如仅底部或仅右侧）
纯 CSS 无法“单侧”投射阴影，但可通过组合技巧模拟：用负的 spread 值压缩阴影范围，再配合正向偏移。例如只想要底部阴影，可写 box-shadow: 0 6px 8px -4px rgba(0,0,0,0.2) —— 这里 -4px 的 spread 把上下左右的扩散都往内收，而 6px 的 v-offset 让阴影主要落在下方。
- 仅右侧阴影：
box-shadow: 6px 0 8px -4px rgba(0,0,0,0.2) - 仅左下角集中阴影：
box-shadow: -4px 6px 6px -2px rgba(0,0,0,0.25) - 避免阴影溢出父容器？给父元素加
overflow: hidden，但注意这会同时裁剪图片自身溢出部分
图片立体感增强：叠加多层 box-shadow + transform
单层阴影太平面。真正有“立体抬升”效果需要两层：一层近距模糊阴影（模拟接触面），一层远距低透明度阴影（模拟高度）。例如：
img {
display: block;
box-shadow:
0 2px 4px -1px rgba(0,0,0,0.2),
0 8px 24px -4px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
transform: translateY(-2px) 让图片视觉上“浮起”，配合阴影偏移方向一致才自然。若只加阴影不微调位置，反而显得下沉或悬浮失衡。
注意：iOS Safari 对 box-shadow 多层渲染性能较敏感，超过 3 层可能卡顿；Android Chrome 则对 blur 值大于 30px 的渲染有延迟。
兼容性与响应式阴影适配
box-shadow 在 IE9+ 和所有现代浏览器均支持，但 IE9 不支持 rgba() 里的 alpha 通道，需提供降级色值：box-shadow: 0 4px 8px #000。响应式场景下，阴影尺寸不能写死像素值——尤其在移动端，大阴影会撑宽容器。
推荐做法是用 rem 或视口单位动态缩放：
@media (max-width: 768px) {
img.shadowed {
box-shadow: 0 0.3rem 0.6rem -0.2rem rgba(0,0,0,0.15);
}
}
更稳妥的是用 JavaScript 检测设备像素比或屏幕宽度后动态切换 class，因为纯 CSS 无法根据 DPR 调整 blur 值——高 DPR 屏幕上 4px 模糊看起来像 2px，容易显得廉价。
真正难处理的是图片宽高比不固定时的阴影一致性：同一套 box-shadow 值在 1:1 和 16:9 图片上视觉重量完全不同，这时得靠设计约定约束图片尺寸，而不是靠 CSS 自适应。
