利用过滤器制作毛玻璃模糊效应的方法：CSS3滤镜属性

今天，当我使用iCloud，我看到iCloud官网的玻璃效果很好。我仔细地研究了它的实现方式，它是利用JS在背景图像的形式画磨砂玻璃背景图片：WebKit的帆布。
但今天，我们仔细研究了在CSS3的模糊方法，可以达到同样的效果。和JS，模糊缩放效果的实现

基础
首先看看模糊属性的表达式：

CSS代码将内容复制到剪贴板。
滤镜：模糊（添加=添加，方向，强度=强度）

我们看到模糊属性有三个参数：添加、方向和强度。
添加参数有两个参数值：true和false。意思是指定图片改成模糊效果。 U3000 U3000 U3000

方向参数用于设置模糊方向，模糊效果按顺时针方向进行，0度表示垂直向上，每度45度，默认值为左270度，下角与方向的对应关系见下表：
例子
CSS代码

CSS代码将内容复制到剪贴板。
{。模糊
过滤：URL（模糊。SVG #模糊）； / *火狐，Chrome，Opera。

WebKit的滤波器：模糊（10px）； / * * / Chrome，Opera
-moz滤波器：模糊（10px）；
MS滤波器：模糊（10px）；
滤波器：模糊（10px）；

过滤器：ProgID：DXImageTransform.Microsoft.Blur（pixelradius = 10，makeshadow = false）； / * * / IE6 ~ IE9
}

HTML的一部分

xml代码将内容复制到剪贴板。

在模糊的图片的大小（10px）确定的模糊图像的大小和模糊性