css为透明图片设置阴影_css图片透明底阴影

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

box-shadow: h-shadow v-shadow blur spread color inset;
1

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

示例：

为图片添加阴影

<img src="image.jpg" alt="image">
1

img {
    box-shadow: 10px 10px 10px gray;
	}
1
2
3

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

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

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

drop-shadow(offset-x offset-y blur-radius spread-radius color)
1

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

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

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

达到预期效果！