在网页开发过程中，为图像添加阴影效果是优化视觉体验的常用手段，能够让图像从背景中凸显出来，增强页面的层次感。CSS提供了多种原生方式实现图像阴影，不需要依赖额外的图片资源，开发效率和可维护性都很高。
使用box-shadow实现图像阴影
box-shadow是CSS中最常用的阴影属性，它可以为元素添加一个或多个阴影，阴影形状默认和元素的外边框一致，对于矩形图像来说，效果非常规整。
box-shadow语法说明
box-shadow的完整语法格式如下：
/* 基础语法 */ box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
各个参数的含义如下：
- inset：可选值，加上后阴影会变为内阴影，默认是外阴影
- offset-x：必填，水平方向的阴影偏移量，正数向右偏移，负数向左偏移
- offset-y：必填，垂直方向的阴影偏移量，正数向下偏移，负数向上偏移
- blur-radius：可选，阴影的模糊半径，值越大阴影越模糊，默认为0，阴影边缘清晰
- spread-radius：可选，阴影的扩展半径，正数阴影扩大，负数阴影缩小，默认为0
- color：可选，阴影的颜色，支持所有CSS颜色值，默认跟随元素的文本颜色
box-shadow实现图像阴影示例
下面是一个给图像添加外阴影的基础代码示例：
/* 基础阴影样式 */
.img-shadow {
width: 300px;
height: auto;
/* 水平偏移10px，垂直偏移10px，模糊15px，扩展0，灰色阴影 */
box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
}
<img src="https://ipipp.com/sample.jpg" alt="示例图像" class="img-shadow">
如果需要内阴影效果，只需要加上inset参数即可：
.img-inner-shadow {
width: 300px;
height: auto;
/* 内阴影，水平偏移0，垂直偏移0，模糊20px，黑色半透明 */
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
使用filter的drop-shadow实现图像阴影
除了box-shadow，CSS的filter属性中的drop-shadow函数也可以实现阴影效果，它的阴影形状和元素的实际内容轮廓一致，而不是和边框一致，对于非矩形图像（比如带透明通道的PNG图像）效果更自然。
drop-shadow语法说明
drop-shadow的语法和box-shadow类似，但是不支持inset参数，也不能设置阴影扩展半径：
/* 语法格式 */ filter: drop-shadow(offset-x offset-y blur-radius color);
参数含义和box-shadow中对应的参数一致，只是少了inset和spread-radius两个参数。
drop-shadow实现图像阴影示例
下面是给带透明背景的PNG图像添加阴影的示例：
/* 针对非矩形图像的阴影样式 */
.img-drop-shadow {
width: 300px;
height: auto;
/* 水平偏移8px，垂直偏移8px，模糊10px，灰色阴影 */
filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.4));
}
<img src="https://ipipp.com/transparent-logo.png" alt="透明背景图像" class="img-drop-shadow">
两种实现方式的区别对比
为了帮助开发者选择合适的实现方式，下面从多个维度对比box-shadow和drop-shadow的差异：
| 对比维度 | box-shadow | filter drop-shadow |
|---|---|---|
| 阴影形状依据 | 元素边框形状 | 元素内容轮廓 |
| 支持内阴影 | 是 | 否 |
| 支持阴影扩展 | 是 | 否 |
| 非矩形图像适配性 | 差，阴影为矩形 | 好，阴影贴合内容轮廓 |
| 性能消耗 | 较低 | 略高，因为需要计算内容轮廓 |
实际开发注意事项
在使用CSS实现图像阴影时，有几个细节需要注意：
- 阴影颜色建议使用半透明的黑色或灰色，避免颜色过于突兀，影响页面整体视觉
- 如果需要给大量图像添加阴影，优先选择
box-shadow，性能表现更好 - 对于带圆角的图像，
box-shadow会自动跟随圆角形状生成阴影，不需要额外处理 - 如果阴影效果没有生效，检查元素是否有
overflow: hidden属性，该属性可能会裁剪掉阴影部分
注意：
filter属性的兼容性略低于box-shadow，如果需要兼容老旧的浏览器（比如IE9及以下版本），建议优先使用box-shadow实现阴影效果。
CSSbox_shadowfilter图像阴影阴影效果修改时间：2026-06-12 04:33:42