box-shadow仅作用于元素边界框，无法贴合图片透明或圆角轮廓；filter: drop-shadow()基于alpha通道逐像素生成阴影，可完美适配形状，但需注意硬件加速、safari兼容性及与3d变换的冲突。
HTML 本身不提供“图片阴影”这个独立功能，box-shadow 和 filter: drop-shadow() 是唯二真正可用、浏览器原生支持的方案，但它们行为完全不同——选错就容易出现边缘锯齿、伪影、z-index 失效或移动端渲染异常。
box-shadow 能加阴影，但不能模拟真实立体感
box-shadow 只作用于元素的**边界框（bounding box）**，不是图片内容本身。对 <img> 直接加 box-shadow: 0 10px 20px rgba(0,0,0,0.3) 看似有阴影，实则只是给矩形框描边，无法贴合图片透明区域或不规则轮廓。
- 如果图片是 PNG 且带透明背景，阴影会绕着整个矩形铺开，和内容脱节
- 圆角图片（
border-radius）加box-shadow后，阴影仍是直角矩形，不跟随圆角弧度 - 它不参与 3D 空间计算，
transform: translateZ(20px)不会让阴影变淡或偏移——阴影永远“钉死”在原平面
filter: drop-shadow() 才能贴合图片形状
filter: drop-shadow(x y blur color) 是真正按图片**Alpha 通道逐像素生成阴影**的方案，能完美绕过透明区域、适配圆角、响应缩放变形。
- 写法示例：
img { filter: drop-shadow(0 8px 12px rgba(0,0,0,0.25)); } - 必须用
filter，不是-webkit-filter（现代浏览器已无需前缀） - 注意：它会触发硬件加速，频繁动画中慎用；部分旧版 Safari 对
drop-shadow的模糊半径支持不稳定 - 不能和
transform-style: preserve-3d共存于同一元素——若同时需要 3D 翻转 + 形状贴合阴影，得把img包进一层<div>，阴影加在父容器上，3D 变换也作用于该容器 <h3>想让图片“浮起来”？必须配合 Z 轴位移</h3> <p>纯阴影只是视觉修饰，要出立体感，关键在**深度暗示**：人眼靠相对位移判断前后。只加阴影不移动，永远是“贴纸感”。</p> <ul> <li>正确做法：给图片容器加 <code>transform: translateZ(12px)（或配合rotateX(5deg)模拟倾斜），再叠加filter: drop-shadow() - 别对
<img>自己设translateZ——它默认是transform-style: flat，Z 轴会被忽略；必须包一层<div class="lifted-img"><img></div>，并在该<div> 上设 <code>transform-style: preserve-3d - 移动端需额外加
will-change: transform防卡顿，但仅限 hover/active 触发时动态添加，避免常驻导致内存泄漏 -
position: relative+z-index不影响filter阴影的绘制层，但会影响容器自身在文档流中的堆叠顺序 - 父容器若有
overflow: hidden，会裁剪掉drop-shadow的扩散区域——改用overflow: visible或扩大父容器 padding - 使用
backface-visibility: hidden时，若同时开了filter，某些 Chrome 版本会意外丢弃阴影；解决方案是去掉该属性，或改用opacity: 0.999替代
常见翻车点：阴影“穿模”或消失
阴影突然被其他元素盖住、或 hover 后阴影没了，大概率是层叠上下文（stacking context）混乱导致。
