注：css3毛玻璃效果應該很多人都知道怎么實現，但是有個問題是圖片模糊了之后相當于縮小了，所以顏色深的圖片會出現白邊，這里說下我參考網上的解決方式吧！

1、毛玻璃實現方法：

CSS3 blur濾鏡實現

如下測試代碼：

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

相關HTML代碼如下：

需要注意目前火狐不支持，其他些瀏覽器，如FireFox到目前還沒有支持CSS3 filter. 當然，要實現(比方說)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代碼如下： 原理很簡單就是在要模糊的圖片下面在定位一張相同的圖片，當要模糊的圖片縮小時，就會顯示出低下的那張圖。。。白邊就不見了，哈哈哈。。。你想到了嗎？

本文原創發布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的css毛玻璃效果白边_css3毛玻璃效果白边问题_html/css_WEB-ITnose的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。