通常，我们为图片设置阴影使用box-shadow属性，代码如下：

1
box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow：必需设置的值，定义水平阴影的位置。允许负值。
  • v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。
  • blur：可选设置的值，定义模糊距离。
  • spread：可选设置的值，定义阴影的尺寸。
  • color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。
  • inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。

示例：

为图片添加阴影

1
<img src="image.jpg" alt="image">
1
2
3
img {
    box-shadow: 10px 10px 10px gray;
	}

但是对于透明图片，使用该方法像是为图片添加了边框，不能根据图片的实际轮廓添加阴影，效果如下：

对于透明图片，我们可以用filter:drop-shadow

box-shadow 属性在元素的整个框后面创建一个矩形阴影，而 drop-shadow 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。简单来说，drop-shadow生成的阴影是基于图片内部形状，是不透明的部分，而不是在图片外面，可以根据透明图片的轮廓生成阴影。

1
drop-shadow(offset-x offset-y blur-radius spread-radius color)
  • offset-x offset-y ：必需设置的值，x偏移和y偏移
  • blur-radius：可选设置的值，阴影的模糊半径，默认为0
  • spread-radius：可选设置的值，阴影的扩展半径，但是大多数浏览器不支持这个参数
  • color：可选设置的值，色值

下面看使用drop-shadow的效果：

1
2
3
img {
    filter: drop-shadow(2px 4px 8px gray);
	}

达到预期效果！