css3毛玻璃模糊效果

css3 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" ""
>
<
svg 
version
="1.1"
xmlns
=""xmlns:xlink
=""xmlns:ev
=""baseprofile
="full"
>
<
defs
>
<
filter 
id="blur"
>
<
fegaussianblur 
stddeviation
="10"
/>
filter
>
defs
>
svg>

如下css呼叫**：

filter: url(blur.svg#blur); /* firefox, chrome, opera */

完整的css**

.blur

css毛玻璃效果白邊 css3毛玻璃效果白邊問題

1 毛玻璃實現方法 css3 blur濾鏡實現 如下測試 blur webkit filter blur 10px chrome,opera moz filter blur 10px ms filter blur 10px filter blur 10px 需要注意目前火狐不支援，其他些瀏覽器，如f...

CSS毛玻璃模糊效果

class comment bk class top blur div class top class iconfont icon pinglun i li div comments div div div comment bk comments top blur top 毛玻璃模糊效果的精髓我覺得...

解決css3毛玻璃效果 blur 有白邊問題

做乙個登入頁，全屏背景圖毛玻璃效果，實現方法如下 html css login wrap login mask login box 效果如下 可以發現邊上是有白邊的，這是一種blur的值很大的情況下。此時的解決方法是直接將background size cover 改成background size...