最近在做一個(gè)css3的濾鏡模糊的效果，但是我發(fā)現(xiàn)，有些瀏覽器一點(diǎn)效果都沒有，這是瀏覽器兼容性導(dǎo)致的，怕今后會(huì)忘記所以就先寫下來，也希望可以幫到需要的小伙伴。

代碼如下：

div{//設(shè)置半透明濾鏡效果

opacity: 0.5; filter:alpha(Opacity=50);

}

1、filter：對(duì)IE設(shè)置半透明濾鏡效果，filter:alpha( Opacity=50)代表該對(duì)象50%半透明，支持IE8及以下瀏覽器。2、opacity：css3屬性，對(duì)除IE外所有瀏覽器支持包括谷歌，火狐，IE9及以上瀏覽器。

div{//設(shè)置模糊濾鏡

-webkit-filter:blur(3px);

-moz-filter:blur(3px);

filter:url(blur.svg#blur);

filter:

filter:blur(3px);

}

1.屬性尚未成為W3C標(biāo)準(zhǔn)的一部分，所以需要添加前綴，目前僅-webkit-filter:blur(3px)前綴寫法Chrome瀏覽器支持。

2.Firefox不支持這樣直接的寫-moz-filter:blur(3px)，需要引入blur.svg的文件才能完成與其它眾瀏覽器一樣的模糊效果，而該文件里的代碼是這樣滴：

<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"><filterid="blur"><feGaussianBlurstdDeviation="3"/></filter></svg>

只要在css樣式中引入該文件就ok了，引入樣式寫法如下：filter:url(blur.svg#blur);

3.IE瀏覽器直接通過濾鏡的寫法就可以了：filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');但是只支持IE6~IE9，

IE10以及以后的IE11都是支持SVG的濾鏡的，但是，此demo在這些瀏覽器下是無效的，為何？

好像因?yàn)槠洳恢С种苯釉贑SS使用使用filter:url的寫法，具體解決方法還在研究中。