图片加阴影有两条路径，选错的那条通常也能出效果，代价是边缘糊、或者被父容器裁掉。差别在于计算依据：一条看盒子，一条看像素。
两种做法的差异
| 写法 | 依据 | 适合对象 | 代价 |
|---|---|---|---|
| box-shadow | 元素的矩形盒边界 | 矩形图片、卡片、容器 | 低 |
| filter: drop-shadow() | 渲染结果的 Alpha 通道 | 透明 PNG、SVG、不规则图形 | 较高，易在动画中掉帧 |
img 属于替换元素，但仍然参与盒模型。矩形图片走 box-shadow 即可得到干净锐利的边；box-shadow 不知道内容形状，透明 PNG 的圆角与镂空地带不会出现内缩的阴影，这时才需要 filter。
四个参数
img {
display: block;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
}
- 水平偏移 2px：正值向右；
- 垂直偏移 2px：正值向下；
- 模糊半径 6px：越大越散；
- 颜色用半透明黑，避免纯黑造成的脏边。
第四个参数 spread 省略时为 0，向外扩就用正值。display: block 用于去掉行内元素底部的基线间隙。
三个常见失误
- 父容器 overflow: hidden 把外扩的阴影裁掉。给容器加内边距，或把阴影移到父层。
- 大面积高斯模糊配合动画。滚动或 hover 频繁重算模糊会掉帧，改用 opacity 过渡。
- 阴影颜色取全黑。改用 rgba 控制透明度，深色背景上对比更自然。
配合圆角
.thumb {
border-radius: 10px;
overflow: hidden;
}
.thumb img { box-shadow: none; }
.thumb { box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
圆角裁剪与阴影放在同一层处理，避免容器裁切把内层阴影切掉。