CSS3毛玻璃效果白边问题
注：css3毛玻璃效果应该很多人都知道怎么实现，但是有个问题是图片模糊了之后相当于缩小了，所以颜色深的图片会出现白边，这里说下我参考网上的解决方式吧！
1、毛玻璃实现方法：
CSS3 blur滤镜实现如下测试代码：
.blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }
相关HTML代码如下：
<img src="mm1.jpg" /><img src="mm1.jpg" class="blur" />
需要注意目前火狐不支持，其他些浏览器，如Firefox到目前还没有支持CSS3 filter. 当然，要实现（比方说）FireFox 24浏览器上照片变模糊的效果，也是可以的。可以使用SVG的模糊滤镜。新建文命名为blur.svg的SVG文件：
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" basePRofile="full"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </defs></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代码如下：
<img src="mm1.jpg" />
<img src="mm1.jpg" />原理很简单就是在要模糊的图片下面在定位一张相同的图片，当要模糊的图片缩小时，就会显示出低下的那张图。。。白边就不见了，哈哈哈。。。你想到了吗？