CSS躬行記（6）——濾鏡
濾鏡（filter）可改造元素的視覺呈現，CSS內置的濾鏡有10種，通過SVG文件還能自定義濾鏡。
一、調色濾鏡
調色濾鏡可控制元素的模糊、顏色、亮度等變化，並且多個濾鏡可組合在一起使用。這些濾鏡大部分既能接收百分數，也能接收數值。當傳入的值大於上限值時，會以上限值來處理。
1）模糊
blur()濾鏡會對元素進行高斯模糊的處理，它能接收一個模糊半徑的長度值。注意，不能向其傳遞負數。在下圖中，右側是調用了blur()濾鏡後的效果。
div { filter: blur(5px); }
2）透明
opacity()濾鏡可控制元素的透明度，其默認值為1或100%（表示不透明），最小值為0。opacity()濾鏡與opacity屬性類似，但兩者不是互斥關係，可同時應用於同一個元素，不過opacity屬性會在執行完所有的濾鏡後再起作用。在下圖中，右側是調用了opacity()濾鏡後的效果。
div { filter: opacity(.5); }
3）陰影
drop-shadow()濾鏡可為元素的透明部分提供陰影，其取值與text-shadow屬性類似，也是X軸與Y軸的偏移、模糊半徑以及顏色。下圖使用了一張透明的五角星圖，右側調用了drop-shadow()濾鏡，陰影會沿着透明輪廓渲染。
div { filter: drop-shadow(5px 5px 5px #F60); }
4）灰度
grayscale()濾鏡能轉換元素的灰度，當值為1或100%時，元素會轉換成完全的灰度。在下圖中，右側是調用了grayscale()濾鏡後的效果。
div { filter: grayscale(100%); }
5）褐色
sepia()濾鏡能指定元素褐色的比例，即用褐色為元素上色。當值為1或100%時，元素會轉換成完全的深褐色。在下圖中，右側是調用了sepia()濾鏡後的效果。
div { filter: sepia(100%); }
6）反轉
invert()濾鏡能將元素的顏色反轉處理，即用255或100%減去顏色的R、G和B通道的值。在下圖中，右側是調用了invert()濾鏡後的效果。
div { filter: invert(100%); }
7）色相旋轉
hue-rotate()濾鏡能接收一個角度值，參照標準色輪（如下圖）旋轉元素的整體色相。
在下圖中，右側是調用了hue-rotate()濾鏡旋轉90°後的效果。
div { filter: hue-rotate(90deg); }
8）亮度
brightness()濾鏡能調整元素的明暗程度，值越小，元素越暗。在下圖中，右側是調用了brightness()濾鏡後的效果。
div { filter: brightness(50%); }
9）對比度
contrast()濾鏡能調整元素顏色的對比度，對比度越低，顏色越接近。在下圖中，右側是調用了contrast()濾鏡後的效果。
div { filter: contrast(30%); }
10）飽和度
saturate()濾鏡能調整元素顏色的飽和度，飽和度越低，顏色越暗。在下圖中，右側是調用了saturate()濾鏡後的效果。
div { filter: saturate(50%); }
11）組合
在聲明filter屬性時，可定義多個濾鏡函數，用空格分隔，如下所示。在下圖中，右側是調用了多個濾鏡後的效果。
div { filter: drop-shadow(5px 5px 5px #F60) sepia(100%) saturate(50%); }
二、SVG濾鏡
所有的CSS濾鏡都能通過SVG濾鏡實現。以blur(5px)為例，首先用一個名為filter.svg的文件描繪模糊的效果，其內容如下所示。
<svg height="0" xmlns="//www.w3.org/2000/svg"> <filter id="blur" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> </svg>
然後通過url()函數引用SVG文件中的濾鏡，注意，井號後面跟着的是filter元素的id屬性值，效果如下圖所示。
div { filter: url(./filter.svg#blur); }
通過SVG文件的方式就能創造出各種功能的濾鏡，以適應更多的複雜場景。
