最直接用 filter: drop-shadow() 给 <img> 加阴影，按图像 Alpha 通道轮廓投影，不依赖父容器；区别于 box-shadow 的矩形盒模型投影，且不支持 inset 和多层逗号写法。
用 filter: drop-shadow() 实现图片阴影最直接
直接给 <img> 元素加 filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)) 就能出阴影，不依赖父容器、不破坏文档流，也不需要额外包裹标签。它和 box-shadow 的关键区别在于：前者作用于图像的**Alpha通道轮廓**（即按图片实际形状投影），后者只框住矩形盒模型。
常见错误是误以为 drop-shadow() 和 box-shadow() 参数完全一致——其实它没有 inset 关键字，也不支持多层逗号分隔写法（如 drop-shadow(...) drop-shadow(...) 在部分旧浏览器会失效）。
-
drop-shadow(x-offset y-offset blur-radius color)四个参数必须按顺序，缺一不可 - Chrome 117+、Firefox 115+、Safari 16.4+ 支持良好；IE 完全不支持，Edge 12–18 需加
-webkit-前缀 - 对 PNG 透明背景或 SVG 图标效果自然；但对 JPG 等无透明通道图片，阴影仍按矩形边缘生成
为什么 box-shadow 有时比 drop-shadow 更可控
当图片被嵌在带圆角、裁剪或 overflow: hidden 的容器里，box-shadow 只作用于容器的可见区域，而 drop-shadow 仍按原始图像轮廓投射，可能穿出容器边界。这时候反而是老老实实用 box-shadow 更稳。
例如：<div class="card"><img src="..."></div>，给 .card 加 border-radius: 8px; overflow: hidden;，再给 .card 设 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，阴影就严格贴合圆角形状。
立即学习“前端免费学习笔记（深入）”；
-
box-shadow支持inset、多层阴影（用逗号分隔）、甚至负值偏移 - 它不受图片 Alpha 通道影响，JPG/PNG/SVG 表现一致
- 性能上，
box-shadow通常比filter: drop-shadow()开销更低，尤其在滚动或动画中
drop-shadow 在 SVG 内联使用时要注意语法位置
如果把图片写成内联 SVG（比如用 <svg><image href="..."></svg>），就不能在 <image> 标签上直接写 style="filter: drop-shadow(...)” —— 大多数浏览器不认。得把 filter 定义在 <defs> 里，再通过 filter 属性引用：
<svg>
<defs>
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<image href="icon.png" filter="url(#shadow)"/>
</svg>
注意：<feDropShadow> 是 SVG Filter 效果，不是 CSS；stdDeviation 对应 CSS 中的 blur-radius，但数值逻辑不同（越大越模糊），且不支持颜色透明度缩写，必须拆成 flood-color + flood-opacity。
移动端 Safari 对 drop-shadow 的兼容性陷阱
iOS 15.4 之前，Safari 对 filter: drop-shadow() 的 blur-radius 值大于 8px 会直接忽略整个声明，页面看起来像没加阴影。这不是渲染异常，是解析失败。
临时解法只有两个：降模糊值（比如从 12px 改成 6px），或者切回 box-shadow；长期建议用 @supports (filter: drop-shadow(0 0 0 #000)) 做特性检测，再 fallback。
- 别依赖
drop-shadow做大范围柔化效果，尤其涉及 iOS 用户占比高的项目 - 真要兼顾模糊和兼容，可考虑两层叠加：
box-shadow做基础轮廓，再用drop-shadow微调边缘细节（需测试实际表现） - 所有 filter 类效果在 iOS 滚动时容易触发重绘卡顿，慎用于列表项中的图片
