借助SVG滤镜实现CSS无法实现的阴影和模糊效果
虽然CSS中有box-shadow实现盒阴影,drop-shadow()函数可以实现投影效果,filter滤镜或者backdrop-filter背景滤镜实现高斯模糊效果,但是依然存在某些场景,CSS是无能为力的。
此时,可能需要借助SVG滤镜“曲线救国”。
本文就通过几个案例,介绍下SVG滤镜实现CSS无法实现的阴影和模糊效果。
我们可以使用filter滤镜中的drop-shadow()函数轻松实现投影效果,例如:
< img src="fish.png" class="shadow">
.shadow {
filter: drop-shadow(2px 2px 6px #000a);
}
因为drop-shadow()函数并没有内投影的语法,要想实现上图所示的效果,唯有让图像镂空进行模拟,但是这样的处理成本比较高,因为需要对素材进行处理。
此时,可以试试使用SVG滤镜实现PNG图像的内投影效果。
SVG代码如下(复制到页面的任意问题):
<svg width="300" height="300" viewBox="0 0 20 20" style="position:absolute;left:-999px;">
<filter id="inset-shadow">
<!-- 投影偏移 -->
<feOffset dx="0" dy="0"/>
<!-- 投影模糊 -->
<feGaussianBlur stdDeviation="6" result="offset-blur"/>
<!-- 反转投影使其变成内投影 -->
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
<!-- 内投影附加黑色 -->
<feFlood flood-color="black" flood-opacity=".95" result="color"/>
<feComposite operator="in" in="color" in2="inverse" result="shadow"/>
<!-- 把内投影显示在图像上 -->
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
</svg>
此时,只需要下面一行CSS就可以实现PNG图像的内投影效果了。
img {
filter: url(#inset-shadow);
}