&emsp;&emsp;濾鏡（filter）可改造元素的視覺呈現，CSS內置的濾鏡有10種，通過SVG文件還能自定義濾鏡。 ## 一、調色濾鏡 &emsp;&emsp;調色濾鏡可控制元素的模糊、顏色、亮度等變化，并且多個濾鏡可組合在一起使用。這些濾鏡大部分既能接收百分數，也能接收數值。當傳入的值大于上限值時，會以上限值來處理。 **1）模糊** &emsp;&emsp;blur()濾鏡會對元素進行高斯模糊的處理，它能接收一個模糊半徑的長度值。注意，不能向其傳遞負數。在下圖中，右側是調用了blur()濾鏡后的效果。 ~~~css div { filter: blur(5px); } ~~~ :-:  **2）透明** &emsp;&emsp;opacity()濾鏡可控制元素的透明度，其默認值為1或100%（表示不透明），最小值為0。opacity()濾鏡與opacity屬性類似，但兩者不是互斥關系，可同時應用于同一個元素，不過opacity屬性會在執行完所有的濾鏡后再起作用。在下圖中，右側是調用了opacity()濾鏡后的效果。 ~~~css div { filter: opacity(.5); } ~~~ :-:  **3）陰影** &emsp;&emsp;drop-shadow()濾鏡可為元素的透明部分提供陰影，其取值與text-shadow屬性類似，也是X軸與Y軸的偏移、模糊半徑以及顏色。下圖使用了一張透明的五角星圖，右側調用了drop-shadow()濾鏡，陰影會沿著透明輪廓渲染。 ~~~css div { filter: drop-shadow(5px 5px 5px #F60); } ~~~ :-:  **4）灰度** &emsp;&emsp;grayscale()濾鏡能轉換元素的灰度，當值為1或100%時，元素會轉換成完全的灰度。在下圖中，右側是調用了grayscale()濾鏡后的效果。 ~~~css div { filter: grayscale(100%); } ~~~ :-:  **5）褐色** &emsp;&emsp;sepia()濾鏡能指定元素褐色的比例，即用褐色為元素上色。當值為1或100%時，元素會轉換成完全的深褐色。在下圖中，右側是調用了sepia()濾鏡后的效果。 ~~~css div { filter: sepia(100%); } ~~~ :-:  **6）反轉** &emsp;&emsp;invert()濾鏡能將元素的顏色反轉處理，即用255或100%減去顏色的R、G和B通道的值。在下圖中，右側是調用了invert()濾鏡后的效果。 ~~~css div { filter: invert(100%); } ~~~ :-:  **7）色相旋轉** &emsp;&emsp;hue-rotate()濾鏡能接收一個角度值，參照標準色輪（如下圖）旋轉元素的整體色相。 :-:  &emsp;&emsp;在下圖中，右側是調用了hue-rotate()濾鏡旋轉90°后的效果。 ~~~css div { filter: hue-rotate(90deg); } ~~~ :-:  **8）亮度** &emsp;&emsp;brightness()濾鏡能調整元素的明暗程度，值越小，元素越暗。在下圖中，右側是調用了brightness()濾鏡后的效果。 ~~~css div { filter: brightness(50%); } ~~~ :-:  **9）對比度** &emsp;&emsp;contrast()濾鏡能調整元素顏色的對比度，對比度越低，顏色越接近。在下圖中，右側是調用了contrast()濾鏡后的效果。 ~~~css div { filter: contrast(30%); } ~~~ :-:  **10）飽和度** &emsp;&emsp;saturate()濾鏡能調整元素顏色的飽和度，飽和度越低，顏色越暗。在下圖中，右側是調用了saturate()濾鏡后的效果。 ~~~css div { filter: saturate(50%); } ~~~ :-:  **11）組合** &emsp;&emsp;在聲明filter屬性時，可定義多個濾鏡函數，用空格分隔，如下所示。在下圖中，右側是調用了多個濾鏡后的效果。 ~~~css div { filter: drop-shadow(5px 5px 5px #F60) sepia(100%) saturate(50%); } ~~~ :-:  ## 二、SVG濾鏡 &emsp;&emsp;所有的CSS濾鏡都能通過SVG濾鏡實現。以blur(5px)為例，首先用一個名為filter.svg的文件描繪模糊的效果，其內容如下所示。 ~~~html <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> ~~~ &emsp;&emsp;然后通過url()函數引用SVG文件中的濾鏡，注意，井號后面跟著的是filter元素的id屬性值，效果如下圖所示。 ~~~css div { filter: url(./filter.svg#blur); } ~~~ :-:  &emsp;&emsp;通過SVG文件的方式就能創造出各種功能的濾鏡，以適應更多的復雜場景。 ***** > 原文出處： [博客園-CSS躬行記](https://www.cnblogs.com/strick/category/1667864.html) [知乎專欄-CSS躬行記](https://zhuanlan.zhihu.com/pwcss) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。