css3 玻璃效果-css3磨砂玻璃疗效白边问题_html/css_WEB-ITnose

注：很多人应该都知道如何达到css3磨砂玻璃的疗效，但是有一个问题，就是图片模糊后相当于缩小了，所以颜色深的图片会有白边。 这里我参考网上的解决办法！

1、磨砂玻璃的实现方法：

CSS3模糊滤镜的实现

测试代码如下：

.blur {        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);    }

相关HTML代码如下：

需要注意的是，目前Maxthon还不支持css3 玻璃效果，其他浏览器css3 玻璃效果，例如FireFox，还没有支持CSS3过滤器。 当然，在FireFox 24浏览器上也可以实现（例如）照片模糊的效果。 可以使用SVG的模糊滤镜。

创建一个名为blur.svg的新SVG文件：

CSS调用代码如下：

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

完整的CSS代码

.blur {	    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}2、解决白边方式相关HTML代码如下：

原理很简单就是在要模糊的图片下面在定位一张相同的图片，当要模糊的图片缩小时，就会显示出低下的那张图。。。白边就不见了，哈哈哈。。。你想到了吗？