box-shadow是实现图片阴影最直接可控的方式，因其作用于img元素矩形盒模型边界，而filter:drop-shadow()基于Alpha通道易致透明背景扩散；四参数为h-offset、v-offset、blur-radius、spread-radius，最小可靠写法为img{box-shadow:2px 2px 6px rgba(0,0,0,.2)}。
box-shadow 是实现图片阴影最直接、最可控的方式，但很多人一上来就套用默认值，结果阴影“糊成一片”或“完全看不见”，根本原因是没理解参数含义和渲染层级逻辑。
为什么 box-shadow 比 filter: drop-shadow() 更适合图片阴影
对普通 <img> 元素，box-shadow 作用于其矩形盒模型边界，可控性强；而 filter: drop-shadow() 是基于图像 Alpha 通道的像素级投影，会把透明背景（比如 PNG 的镂空部分）也投出阴影，容易产生意外扩散。除非你明确需要跟随图像轮廓的软边阴影，否则优先用 box-shadow。
box-shadow 四个关键参数的实际影响
完整写法是：box-shadow: h-offset v-offset blur-radius spread-radius color;，其中后两个可省略。容易踩坑的是：
-
blur-radius为 0 时阴影边缘锐利，但浏览器实际会做最小 0.5px 模糊处理，所以想“硬边”得配合spread-radius微调 -
spread-radius为负值会让阴影向内收缩——这能模拟“压陷感”，比如按钮按下状态，但对图片通常不适用 - 阴影默认绘制在元素层叠上下文的“上方”，如果父容器有
overflow: hidden，阴影会被裁掉，需加position: relative或调整z-index
给 <img> 加阴影的最小可靠写法
别用网上抄来的“万能模板”。真实可用的起步写法是：
img {
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}
解释：
立即学习“前端免费学习笔记（深入）”；
-
2px 2px：向右下偏移，避免阴影“浮空” -
6px：模糊半径，太小显生硬，太大变灰雾 -
rgba(0,0,0,0.2)：黑+20%透明度，比纯黑更自然；别用#000，它在深色背景下会突兀
如果图片带圆角（border-radius），box-shadow 默认不会跟着变圆——必须加 border-radius 到同一元素上，且不能被 overflow: hidden 截断。
