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可实现毛玻璃(磨砂)的效果，但可能兼容性不好，尤其安卓移动端，

    <style type="text/css">
        body {
            background-image: url('https://scpic.chinaz.net/files/pic/pic9/202102/apic30738.jpg');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .container {
            align-items: center;
            display: flex;
            justify-content: center;
            height: 100%;
            width: 100%;
        }

        .box {
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            font-family: sans-serif;
            text-align: center;
            line-height: 1;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            max-width: 50%;
            max-height: 50%;
            padding: 20px 40px;
        }

 </style>
    <div class="container">
        <div class="box">
            <p>backdrop-filter: blur(10px)</p>
        </div>
    </div>

大致效果如下：

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)

绘制简单三角形

    <style type="text/css">
        .triangle{
            position: absolute;
            width: 0;
            height: 0;
            border-right-color: #f0f;
            overflow: hidden;
            border: 20px solid transparent;
        }
</style>
<i class="triangle"></i>

如下所示：

image.png