css高斯模糊 CSS躬行記（6）濾鏡

濾鏡（filter）可改造元素的視覺呈現，css內建的濾鏡有10種，通過svg檔案還能自定義濾鏡。

調色濾鏡可控制元素的模糊、顏色、亮度等變化，並且多個濾鏡可組合在一起使用。這些濾鏡大部分既能接收百分數，也能接收數值。當傳入的值大於上限值時，會以上限值來處理。

1）模糊

blur()濾鏡會對元素進行高斯模糊的處理，它能接收乙個模糊半徑的長度值。注意，不能向其傳遞負數。在下圖中，右側是呼叫了blur()濾鏡後的效果。

2）透明

opacity()濾鏡可控制元素的透明度，其預設值為1或100%（表示不透明），最小值為0。opacity()濾鏡與opacity屬性類似，但兩者不是互斥關係，可同時應用於同乙個元素，不過opacity屬性會在執行完所有的濾鏡後再起作用。在下圖中，右側是呼叫了opacity()濾鏡後的效果。

3）陰影

drop-shadow()濾鏡可為元素的透明部分提供陰影，其取值與text-shadow屬性類似，也是x軸與y軸的偏移、模糊半徑以及顏色。下圖使用了一張透明的五角星圖，右側呼叫了drop-shadow()濾鏡，陰影會沿著透明輪廓渲染。

4）灰度

grayscale()濾鏡能轉換元素的灰度，當值為1或100%時，元素會轉換成完全的灰度。在下圖中，右側是呼叫了grayscale()濾鏡後的效果。

5）褐色

sepia()濾鏡能指定元素褐色的比例，即用褐色為元素上色。當值為1或100%時，元素會轉換成完全的深褐色。在下圖中，右側是呼叫了sepia()濾鏡後的效果。

6）反轉

invert()濾鏡能將元素的顏色反轉處理，即用255或100%減去顏色的r、g和b通道的值。在下圖中，右側是呼叫了invert()濾鏡後的效果。

7）色相旋轉

hue-rotate()濾鏡能接收乙個角度值，參照標準色輪（如下圖）旋轉元素的整體色相。

在下圖中，右側是呼叫了hue-rotate()濾鏡旋轉90°後的效果。

8）亮度

brightness()濾鏡能調整元素的明暗程度，值越小，元素越暗。在下圖中，右側是呼叫了brightness()濾鏡後的效果。

9）對比度

contrast()濾鏡能調整元素顏色的對比度，對比度越低，顏色越接近。在下圖中，右側是呼叫了contrast()濾鏡後的效果。

10）飽和度

saturate()濾鏡能調整元素顏色的飽和度，飽和度越低，顏色越暗。在下圖中，右側是呼叫了saturate()濾鏡後的效果。

div

11）組合在宣告filter屬性時，可定義多個濾鏡函式，用空格分隔，如下所示。在下圖中，右側是呼叫了多個濾鏡後的效果。

div

所有的css濾鏡都能通過svg濾鏡實現。以blur(5px)為例，首先用乙個名為filter.svg的檔案描繪模糊的效果，其內容如下所示。

然後通過url()函式引用svg檔案中的濾鏡，注意，井號後面跟著的是filter元素的id屬性值，效果如下圖所示。

div

css高斯模糊 CSS躬行記（6） 濾鏡