css3 filter drop-shadow 实现png图片投影

如图一个png示例图片,如何实现图片阴影,如果没有 css3 的滤镜,大概只有做一个带阴影的图片了。

常规 box-shadow

可以看到阴影被加在了图片盒子的周围,并不是png内容周围。

滤镜 drop-shadow

再使用 css filter drop-shadow 实现看看

源码:

1
2
3
.css {
filter: drop-shadow(0 0 5px #000);
}

使用chrome等高级浏览器,会看到阴影被加在了内容周围,完美实现。

其他使用方式

给png图片添加叠影效果:

源码:

1
2
3
.css {
filter: drop-shadow(0 8px 0 #666) drop-shadow(0 2px 0 #000);
}

此滤镜不仅可以给图片添加投影,还能给文字添加,如下:

内容文字

源码:

1
2
3
.css {
filter: drop-shadow(0 3px 0 #666) drop-shadow(0 1px 0 #000);
}

此效果也能用于 canvas 绘制的图片,比如偶尔设计师脑洞给一些地图添加了叠影,则可使用此方法实现。

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()

本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2021-08-17/css3-filter-drop-shadow/

如果您觉得文章不错,可以点击文章中的广告支持一下!