在网页排版中，为图片增加阴影是常见的视觉处理手段，它能让内容从背景中自然浮起。CSS提供了多种实现方式，不同方法在适用场景和渲染表现上存在明显区别。下面我们先看一张示意图片，再逐一拆解具体写法。
一、使用box-shadow为图片加阴影
box-shadow是最直观的属性，它作用于元素的边框盒子。当图片以<img>标签直接展示且没有透明区域时，box-shadow会在图片矩形外缘绘制阴影。其基本语法为水平偏移、垂直偏移、模糊半径、扩散半径和颜色。
下面的例子给图片添加了向右下偏移十像素、模糊二十像素的灰色阴影。这种方式性能好、兼容性强，但从IE9起就得到支持，几乎覆盖所有现代浏览器。需要注意的是，如果图片带有圆角，box-shadow会跟随圆角形状，这是它的优势之一。
img.shadow-box {
/* 水平偏移 垂直偏移 模糊 扩散 颜色 */
box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
不过box-shadow的局限在于：它只认元素的盒子形状。当图片是透明背景的PNG，且主体不是矩形时，阴影依然是方块状，无法贴合图像真实轮廓。此时就需要换用基于图像像素的阴影方案。
二、使用filter的drop-shadow处理透明图
filter属性中的drop-shadow函数会根据图像的不透明像素生成阴影，因此能完美贴合PNG或SVG中不规则图形的边缘。它接受的参数与box-shadow类似，但不支持内阴影和扩散半径。
以下代码对一张带透明区域的logo图片施加阴影，阴影会沿着logo形状外扩，而不是套一个方框。由于drop-shadow属于滤镜，浏览器会创建独立的合成层，在复杂页面中略微增加渲染开销，但视觉正确度更高。
img.shadow-filter {
/* 滤镜阴影：偏移与模糊，颜色 */
filter: drop-shadow(6px 6px 8px rgba(0, 0, 0, 0.4));
}
使用drop-shadow时要避免和box-shadow混用导致双重阴影。如果图片本身是不透明矩形，两者效果接近；若是透明图，优先选drop-shadow。另外，部分旧版IE不支持filter，需配合渐进增强策略。
三、通过包裹元素与伪元素模拟阴影
在需要兼容非常老的浏览器，或希望更精细控制阴影层次时，可以用一个容器包住图片，并利用::after伪元素绘制阴影层。这种做法把阴影从图片本身解耦，方便做动画或叠加多层阴影。
示例中外层div设置相对定位，伪元素绝对定位在底部并应用模糊和渐变来模拟柔和投影。虽然代码量稍多，但能实现box-shadow难以表达的渐隐阴影带，也规避了滤镜的性能问题。
<div class="img-wrap"> <img src="demo.png" alt="示例" /> </div>
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap::after {
content: "";
position: absolute;
left: 5%;
right: 5%;
bottom: -12px;
height: 12px;
background: rgba(0, 0, 0, 0.25);
filter: blur(6px);
z-index: -1;
}
这种结构的缺点是增加了DOM节点，且在响应式缩放时要同步调整伪元素尺寸。实际项目中，建议先判断目标浏览器范围，再决定用原生属性还是模拟方案。
四、参数选择与性能注意
无论采用哪种方式，阴影的模糊半径越大、颜色越深，视觉重量感越强。通常界面辅助性图片使用淡阴影（透明度零点二到零点四）即可，避免抢夺主体内容注意力。
从性能角度看，box-shadow由浏览器原生绘制最快；drop-shadow因触发滤镜合成可能在某些移动端掉帧；伪元素模拟则依赖普通图层，稳定性好。开发时可用开发者工具查看图层数和重绘耗时，选取平衡点。
| 方案 | 贴合透明度 | 兼容性 | 性能 |
|---|---|---|---|
| box-shadow | 仅矩形 | 极广 | 优 |
| filter drop-shadow | 贴合轮廓 | 现代浏览器 | 中 |
| 伪元素模拟 | 自定义 | 全部 | 良 |
综合来看，普通照片用box-shadow足够；透明素材用drop-shadow最省心；特殊视觉或老旧环境再用伪元素。弄清原理后，按场景取舍即可写出干净的样式代码。
cssbox-shadowfilter_drop-shadow修改时间：2026-08-02 15:30:29