注：css3毛玻璃效果應(yīng)該很多人都知道怎么實(shí)現(xiàn)，但是有個(gè)問(wèn)題是圖片模糊了之后相當(dāng)于縮小了，所以顏色深的圖片會(huì)出現(xiàn)白邊，這里說(shuō)下我參考網(wǎng)上的解決方式吧！

1、毛玻璃實(shí)現(xiàn)方法：

CSS3 blur濾鏡實(shí)現(xiàn)

如下測(cè)試代碼：

.blur {

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

}

相關(guān)HTML代碼如下：

需要注意目前火狐不支持，其他些瀏覽器，如FireFox到目前還沒(méi)有支持CSS3 filter. 當(dāng)然，要實(shí)現(xiàn)(比方說(shuō))FireFox 24瀏覽器上照片變模糊的效果，也是可以的。可以使用SVG的模糊濾鏡。

新建文命名為blur.svg的SVG文件：

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">

如下CSS調(diào)用代碼：

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、解決白邊方式

相關(guān)HTML代碼如下：

原理很簡(jiǎn)單就是在要模糊的圖片下面在定位一張相同的圖片，當(dāng)要模糊的圖片縮小時(shí)，就會(huì)顯示出低下的那張圖。。。白邊就不見了，哈哈哈。。。你想到了嗎？

總結(jié)

以上是生活随笔為你收集整理的css毛玻璃效果白边_css3毛玻璃效果白边问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。