仅需两个CSS属性实现毛玻璃效果

1.box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

注意： boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 } 当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。 X轴和Y轴位移不等同但类似于Photoshop里面的”角度”和”位置。 阴影大小、扩展、颜色和Photoshop里面的都同理。

2.backdrop-filter：

backdrop-filter 是使透过该层的底部元素模糊化 backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 backdrop-filter目前兼容性不佳，尤其是安卓移动端。

核心代码：

background: rgba(244, 243, 244, 0.18);
box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);

完整代码

html代码：

 <div style="display:flex">
        <div id="haha">
            <div id="xixi"></div>
        </div>
        <div id="haha1">
            <div id="xixi"></div>
        </div>
        <div id="haha2">
            <div id="xixi"></div>
        </div>
        <div id="haha3">
            <div id="xixi"></div>
        </div>
        <div id="haha4">
            <div id="xixi"></div>
        </div>
    </div>

css代码：

 * {
        margin: 0;
        padding: 0;
    }
    #xixi {
        margin: 100px auto;
        width: 100px;
        height: 100px;
        background: rgba(244, 243, 244, 0.18);
        box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
            0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
            0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
    }
    #haha {
        width: 20%;
        height: 800px;
        background: rgb(239, 81, 108);
        padding: 20px;
    }
    #haha1 {
        width: 20%;
        height: 800px;
        background: pink;
        padding: 20px;
    }
    #haha2 {
        width: 20%;
        height: 800px;
        background: rgba(199, 143, 39, 0.888);
        padding: 20px;
    }
    #haha3 {
        width: 20%;
        height: 800px;
        background: blanchedalmond;
        padding: 20px;
    }
    #haha4 {
        width: 20%;
        height: 800px;
        background: rgb(59, 59, 215);
        padding: 20px;
    }

最终的毛玻璃效果

图一 图二