最稳妥的图片阴影方案是将 box-shadow 应用于容器或伪元素而非 img 本身，因其为替换元素，直接添加易导致裁剪、圆角漏光、旧版 safari 忽略等问题。
直接给 <img> 元素加 box-shadow 是最简方式，但容易出视觉 bug——比如阴影被裁、边缘发虚、圆角处漏光。真正稳妥的做法是把阴影挪到容器或伪元素上。
为什么不能直接在 <img> 上用 box-shadow
因为 <img> 是替换元素（replaced element），其渲染行为受浏览器限制：部分旧版 Safari 会忽略其 box-shadow；当图片有 border-radius 时，阴影仍按矩形盒模型渲染，导致圆角处出现“硬边”或“毛边”；更关键的是，overflow: hidden 父容器会直接裁掉超出部分的阴影，而你很难控制图片尺寸与阴影溢出的关系。
常见错误现象：img { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } 在浅色背景上，四个角能看到明显灰色晕染，不是设计意图。
- 解决思路：用
<div> 包一层，阴影加在容器上 <li>或者用 <code>::before伪元素承载阴影，<img>专注内容渲染 - 若必须直接作用于图片（如 CMS 输出无法改 HTML），需加
display: block+vertical-align: middle防止基线留白干扰阴影位置 -
offset-x设为0：避免左右偏移造成构图失衡 -
offset-y控制浮起感：常用2px～6px，值越大越像“抬起来” -
blur-radius别超12px：移动端建议4px～8px，否则缩放后边缘变粗 -
spread-radius用负值收边：例如-2px可抵消blur导致的左右扩散，让阴影更“贴底” - 颜色统一用
rgba()：比如rgba(0,0,0,0.08)，比#00000014更可控、调试直观 - 必须配合负
spread-radius：比如border-radius: 12px时，spread: -3px能显著改善圆角衔接 - 父容器不能设
overflow: hidden：否则圆角处阴影被硬裁，看起来像缺了一块 - 更稳方案：用伪元素 +
border-radius继承：给容器设border-radius，再让::before也设相同值，阴影就自然贴合 - 慎用
inset：内阴影对图片几乎无效，它会盖在图片内容上，不是“嵌入感”，而是“遮挡感” -
drop-shadow()不支持spread-radius和inset，参数只有三个：h-offset v-offset blur-radius color - 性能略好于多层
box-shadow，但单层差异可忽略 - 不支持 CSS 变量动态修改 blur 值（
filter属性值整体不可被变量替换） - 如果图片本身无透明区域，
drop-shadow()和box-shadow视觉效果几乎一致，没必要换
box-shadow 参数怎么配才让图片不“飘”也不“糊”
图片阴影要兼顾真实感和轻量，重点压住垂直方向、控制模糊范围、收紧横向溢出。推荐组合逻辑：
示例：box-shadow: 0 4px 8px -2px rgba(0,0,0,0.08); —— 这是卡片类图片最安全的起步值。
圆角图片+阴影的避坑要点
当 <img> 或其容器设了 border-radius，box-shadow 默认仍按直角矩形投射，导致圆角外侧阴影“鼓包”或内侧“断层”。
要不要用 filter: drop-shadow() 替代
可以，但只在特定场景下更优：drop-shadow() 跟随图片 Alpha 通道，适合 PNG 图标、剪贴画等带透明边缘的图；它能投出非矩形轮廓的阴影，这是 box-shadow 做不到的。
但要注意：
真正容易被忽略的点：阴影是否参与交互。无论用哪种方式，阴影本身不可点击、不响应 :hover，所有交互逻辑仍绑定在图片或其容器上——别指望靠阴影扩大点击热区。
