利用CSS3 filter:blur属性实现毛玻璃模糊效果的方法

简介：
本文介绍了如何使用CSS3中的filter:blur属性来创建毛玻璃风格的模糊背景效果，详细讲解了其实现方法和应用场景。 今天在使用iCloud的时候发现苹果的 iCloud 官网采用了非常赞的毛玻璃效果，并且研究了其实现方式。它通过结合JavaScript与background-image: -webkit-canvas来绘制出这种背景图片的效果。不过，我后来又深入研究了一下CSS3中的blur方法，也能够达到同样的视觉效果，并且配合JavaScript可以实现模糊缩放的功能。 关于blur属性的表达式如下： ``` filter：blur（add=add，direction，strength=strength） ``` 可以看到，这个属性包括三个参数：`add`、`direction`和 `strength`。其中，`add` 参数有两个可选值：t。