css制作磨砂效果

使用 backdrop-filter 实现磨砂效果

通过 backdrop-filter 属性可以轻松实现磨砂玻璃效果，该属性会对元素背后的区域应用滤镜效果。

.blur-effect {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
}

blur() 函数中的数值控制模糊程度，数值越大越模糊。透明背景色 (rgba) 能增强磨砂质感。

使用 filter 实现元素模糊

如果不需要背景模糊，可以直接模糊元素本身：

.element-blur {
  filter: blur(5px);
}

SVG 模糊滤镜

对于更复杂的模糊效果，可以使用 SVG 滤镜：

<svg>
  <filter id="blur-effect">
    <feGaussianBlur stdDeviation="5" />
  </filter>
</svg>

.svg-blur {
  filter: url(#blur-effect);
}

性能优化技巧

移动端使用 backdrop-filter 时，添加 will-change 属性提升性能：

.optimized-blur {
  will-change: backdrop-filter;
}

兼容性处理

对于不支持 backdrop-filter 的浏览器，可以准备降级方案：

.fallback {
  background-color: rgba(255, 255, 255, 0.8);
}

@supports (backdrop-filter: blur(10px)) {
  .fallback {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
  }
}