backdrop-filter实现磨砂玻璃效果

css的backdrop-filter简介：
https://www.zhangxinxu.com/wordpress/2019/11/css-backdrop-filter/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter

backdrop-filter可实现毛玻璃(磨砂)的效果，但可能兼容性不好，尤其安卓移动端，

    
    

        

            
backdrop-filter: blur(10px)
        
    

大致效果如下：

image.png

image.png

滤镜	含义	使用
blur	高斯模糊效果	blur(2px);
brightness	亮度：变图片的亮度，默认值为100%,即1	brightness(2);
contrast	对比度 ：取值和饱和度类似	contrast(2.5);
drop-shadow	投影：类似box-shadow，给图片加阴影	drop-shadow(20px 20px 10px 20px #000) /水平阴影位置，垂直阴影位置，模糊距离，阴影颜色/
grayscale	灰度 ：取值在0-1之间	grayscale(1)
hue-rotate	色调变化：默认值为0deg，取值是角度（angle）	hue-rotate(90deg);
invert	反向 ： 值为0-1之间的小数	invert(1);
opacity	透明度：值为0-1之间的小数，值越大透明度越低	opacity(.3);
saturate	饱和度 ：取值范围为数字即可，默认值1，即100%	saturate(5);
sepia	褐色：取值也是0-1，类似于美图里的怀旧效果	sepia(1)

绘制简单三角形

如下所示：

image.png