### [图片阴影怎么写：box-shadow 与滤镜取舍](https://www.huociguo.com/article/1540)

**Published:** 2026-09-30T05:32:01

**Author:** 米了

**Excerpt:** 图片阴影写在 img 的盒模型边上，透明 PNG 才需要滤镜。四参数含义、最小可靠写法与三个常见失误。

图片加阴影有两条路径，选错的那条通常也能出效果，代价是边缘糊、或者被父容器裁掉。差别在于计算依据：一条看盒子，一条看像素。

![使用笔记本电脑的场景，用于展示网页元素的阴影效果](https://api.huociguo.com/wp-content/uploads/2026/09/c3.jpg)

矩形图片优先用盒模型阴影，按轮廓投影留给透明素材

## 两种做法的差异

| 写法  | 依据  | 适合对象 | 代价  |
| --- | --- | --- | --- |
| box-shadow | 元素的矩形盒边界 | 矩形图片、卡片、容器 | 低   |
| filter: drop-shadow() | 渲染结果的 Alpha 通道 | 透明 PNG、SVG、不规则图形 | 较高，易在动画中掉帧 |

img 属于替换元素，但仍然参与盒模型。矩形图片走 box-shadow 即可得到干净锐利的边；box-shadow 不知道内容形状，透明 PNG 的圆角与镂空地带不会出现内缩的阴影，这时才需要 filter。

## 四个参数

```css
img {
  display: block;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
}
```

-   水平偏移 2px：正值向右；
-   垂直偏移 2px：正值向下；
-   模糊半径 6px：越大越散；
-   颜色用半透明黑，避免纯黑造成的脏边。

第四个参数 spread 省略时为 0，向外扩就用正值。`display: block` 用于去掉行内元素底部的基线间隙。

## 三个常见失误

1.  父容器 overflow: hidden 把外扩的阴影裁掉。给容器加内边距，或把阴影移到父层。
2.  大面积高斯模糊配合动画。滚动或 hover 频繁重算模糊会掉帧，改用 opacity 过渡。
3.  阴影颜色取全黑。改用 rgba 控制透明度，深色背景上对比更自然。

## 配合圆角

```css
.thumb {
  border-radius: 10px;
  overflow: hidden;
}

.thumb img { box-shadow: none; }
.thumb { box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
```

圆角裁剪与阴影放在同一层处理，避免容器裁切把内层阴影切掉。

**Tags:** box-shadow, filter属性, 图片样式, 盒模型, 视觉层次

**Categories:** HTML5

---