借助 SVG 滤镜实现 CSS 无法实现的阴影和模糊效果

145 阅读1分钟

①CSS 中有 box-shadow 实现盒阴影,drop-shadow () 函数可以实现投影效果,filter 滤镜或者 backdrop-filter 背景滤镜实现高斯模糊效果;
②可以利用 SVG 实现内投影效果;
③构建高斯模糊:feGaussianBlur stdDeviation="6" result="offset-blur"/;其中 stdDeviation 表示标准偏差,result 属性值是自己定义的,相同于把结果输出,然后给其他滤镜使用;
④实现内投影:feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/;其中 feComposite 表示混合滤镜,通常用来实现效果的混合,operator 表示混合模式的操作是哪个,支持下面这些属性值:over | in | out | atop | xor | lighter | arithmetic;
⑤operator="out" 表示原始图像和高斯模糊重叠的位置是透明的,于是,混合的结果就是,原始图像只有边缘高斯模糊的区域显示;
⑥feFlood 滤镜该滤镜用 flood-color 元素定义的颜色和 flood-opacity 元素定义的不透明度填充了滤镜子区域;
(参考:www.zhangxinxu.com/wordpress/2…)