前言

在项目开发中UI要求实现磨砂玻璃效果（如下图），发现使用backdrop-filter和filter无法达到要求的效果，因为使用backdrop-filter和filter是起到滤镜的功能，无法实现下图的磨砂效果，因此只能想其他办法实现该效果。

1、repeating-radial-gradient

CSS3的repeating-radial-gradient() 函数用于重复径向渐变。

1.1、浏览器支持版本

1.2、用法

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	定义渐变的形状。值： ellipse (default) 、circle
size	定义渐变的尺寸。值： farthest-corner (default) 、closest-side、closest-corner、 farthest-side
position	定义渐变的位置。默认值是 "center"。
start-color, ..., last-color	色标是在其间呈现平滑过渡的颜色。该值包括一个颜色值，其后是一个可选的停止位置（0％ 到 100％ 之间的百分比值，或沿渐变轴的长度值）。

2、代码实现

.content {
  box-shadow: 0 4px 24px 0 #cacaca;
  border: 1px solid #e5eaf0;
  background: url('***.png') no-repeat right bottom,
    linear-gradient(176.36deg, #f5f8fd 1.69%, rgba(208, 214, 240, 0.3) 97.61%);
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    //磨砂效果
    background-image: repeating-radial-gradient(
      circle at center center,
      rgba(236, 245, 255, 0.4),
      rgb(255, 255, 255) 0.00006px
    );
    border-radius: 12px;
  }
}

最后实现效果如下图，虽然不是百分百还原UI图，但是磨砂效果出来了。

3、参考文章

zhuanlan.zhihu.com/p/375386445