css3 模糊效果

想讓有模糊的效果，我們會想到 css3 裡的濾鏡屬性 filter。該屬效能像 photoshop 一樣處理得到很多的效果，常常用於處理，dom 元素和 video 等也能使用，而且已被大多數現代瀏覽器支援。

filter 有許多值，這裡先介紹要讓模糊必不可少的乙個值 blur()，這是設定高斯模糊，也就是將乙個畫素點重設為周圍畫素點的平均值；引數值越大，即周圍的範圍越大，也就越模糊；引數可設定為畫素單位，不接受百分比值；

如 filter: blur(5px)

仔細看看效果會發現有幾個問題：

超出也被模糊了，尤其是背景色和顏色反差很大更容易發現這個模糊化的邊緣；

邊緣內部，很窄的部分是接近透明的，會漏出背景的顏色；

解決方法:

在外部加一層容器，容器的寬高與一致，設定容器樣式為 overflow: hidden; 即可去除邊緣模糊；

也可以直接在元素上使用 clip: rect(top, right, bottom, right); 剪裁出乙個矩形，需要注意剪裁的元素必須為絕對定位的元素，即需要同時設定 position: absolute；

問題二的產生是由於高斯模糊演算法，使得邊緣接近透明，也可理解為被剪了一圈。blur() 引數的值越大，越明顯，也因此會漏出背景顏色。

解決方式如下：

外部新增一層容器，寬高和一致，同時設定相同的作為容器的背景圖，這樣漏出來的就是容器裡的背景圖。