css毛玻璃效果

css滤镜（filter）中的blur属性

注意：

1.通过给背景添加模糊效果使其不会模糊容器内容，即文字。可以使用backdrop-filter，但firefox并不支持。

<div class="layer">
  <div class="shadow">
    <div class="glass"></div>
    <span>毛玻璃效果GLASS</ span>
  </div>
</div>

.layer{
display: flex;justify-content: center;align- items: center ;
width: 100Vw;height: 100vh;
background: ur1(bg.jpg);
background- position: center ;
background-size: cover;
}
.glass{
display: flex;justify-content: center;align-items: center;
width: 100%;height: 100%;
background: ur1(bg.jpg);
background-size: cover;
background- pos ition: center;
//clip path裁切与filter滤镜,可以使用滤镜添加阴影效果
clip-path: inset(200px 200px); /*裁切*/
filter: blur(20px); /*滤镜*/
}
.shadow{
display: flex;justify-content: center;align-items: center;
height: 100%;width: 100%;
filter: shadow( 0px 20px 10px rgba(0, 0, 0, 0.5));
}

2.模糊滤镜的伪元素的边缘有白边瑕疵

，这一点其实是滤镜本身的问题，也非常好解决，我们只需要将伪元素的范围扩大一点即可：

.glass{
background-size: 150% 150%;
}