最直接方法是给<img>设display: block后应用box-shadow，因其浏览器支持最好、控制直观；需注意<img>默认为inline元素，不设块级会导致阴影异常或被裁切。
用 box-shadow 给 <img> 加投影最直接
图片本身不支持 text-shadow，也不能直接用 filter: drop-shadow()（虽然它也能用，但有兼容性和边缘锯齿问题），box-shadow 是最稳妥、浏览器支持最好、控制最直观的方式。
关键前提是：图片得是块级或行内块元素，否则 box-shadow 不生效——<img> 默认是 inline 元素，阴影只作用于内容框，而 inline 元素的盒模型高度不包含行高，投影常被“裁掉”或位置异常。
- 给图片加
display: block或display: inline-block - 推荐加
display: block+margin: 0 auto居中（如果需要） - 阴影参数顺序别错：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 - 常用简洁写法：
box-shadow: 0 4px 8px rgba(0,0,0,0.15)
img {
display: block;
margin: 0 auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
filter: drop-shadow() 能用，但要注意两个坑
它比 box-shadow 更“贴合”图片轮廓（比如带透明背景的 PNG），但不是所有浏览器都默认开启硬件加速，旧版 Safari 和某些安卓 WebView 里容易模糊或失效。
- 必须确保图片有明确的包裹容器或自身是块级，否则可能无效果
- 不要和
transform（如scale）连用在同一个元素上，Chrome 旧版本会丢弃阴影 - 参数格式和
box-shadow类似，但不支持扩展半径：drop-shadow(0 4px 8px rgba(0,0,0,0.15))
img {
display: block;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
为什么有时阴影“看不见”或“被切掉”
常见原因不是代码写错，而是布局上下文干扰：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
overflow: hidden，把溢出的阴影裁掉了 - 图片在
flex容器中且未设align-items: flex-start，导致基线对齐时底部留白不足，阴影被挤出视口 - 用了
vertical-align: middle等行内对齐方式，改变了 baseline，让box-shadow的垂直偏移计算失准 - 没设
max-width: 100%，响应式场景下图片撑破父容器，阴影位置错乱
移动端适配要额外加一行 backface-visibility: hidden
部分 iOS Safari 在滚动或动画中会临时禁用 box-shadow 渲染，加这行能强制启用合成层，避免阴影闪烁或消失：
img {
display: block;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
backface-visibility: hidden;
}
这个属性本身不改变视觉，但它会影响渲染管线——尤其在配合 transform 或页面滚动时，漏掉它，投影可能在滑动中突然变淡甚至消失。
