濾鏡（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="http://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檔案的方式就能創造出各種功能的濾鏡，以適應更多的複雜場