如何实现毛玻璃效果？

毛玻璃效果，也叫背景模糊效果，能让你的界面元素看起来像一块磨砂玻璃，隐约透出背后的内容，质感一下子就上来了。在CSS3标准里，现在有个属性叫backdrop-filter，用它来实现是再直接不过了。

核心代码其实就一两行。你只需要给那个想做成毛玻璃的元素（比如一个导航栏或者一个模态框）加上这个属性就行。

.frosted-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* 对Safari的兼容前缀 */
}

这里的关键是backdrop-filter: blur(10px)，它会让这个元素背后的区域（也就是被它遮挡住的所有东西）发生模糊处理，模糊半径是10像素。同时，我们通常会给元素加一个半透明的背景色（比如上面的rgba(255, 255, 255, 0.2)），让玻璃的质感更明显。

不过，这个属性虽然好用，但浏览器兼容性你得留意一下。在写的时候，通常需要加上-webkit-前缀来确保在Safari和旧版Chrome里能正常工作。对于一些老版本的浏览器，你可能需要一个备选方案。

还有一种更早、兼容性更广的实现思路，是用伪元素来“模拟”背后的背景。思路是：创建一个和背景区域一样大的伪元素，对它做模糊处理，然后把它放在目标元素的下面。这种方法代码稍多点，但可控性强。

.container {
  position: relative;
}
.glass-pane {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.glass-pane::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

在实际项目中用这个效果，有两点小经验。一是注意性能，backdrop-filter和filter: blur()的模糊运算比较耗费资源，别在会频繁滚动或动画的大面积元素上滥用。二是注意边界，毛玻璃元素最好有个明确的边界，比如加上细边框或者阴影，这样它和背景的混合会更自然、更有立体感。用在导航栏、卡片或者弹窗上，效果通常很不错。