filter(濾鏡)屬性，是CSS3中非常有意思的一個屬性，可惜IE不支持（當然IE有它專屬的濾鏡方式）。無所謂，反正IE已經日薄西山。當然，強迫症的同學還是可以在網上找到與CSS3 filter對應的IE濾鏡方式，
1、模糊濾鏡 blur(Npx)
給圖像設置高斯模糊。值越大越模糊，默認是0，就是不模糊；filter:blur(4px);
不過，blur模糊的缺點是邊緣也會模糊不清。不過，在實際的應用中，會給圖像添加一個box，超出范圍隱藏。
2、亮度brightness(%)
使圖片更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。值超過100%，圖像會比原來更亮。如果沒有設定值，默認是1。可以使用百分比也可以使用小數表示。 filter:brightness(2);
這里寫brightness(2) 跟 寫 brightness(200%) 效果是一樣的。
3、對比度contrast(%)
調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值超過100%，意味着會運用更低的對比。若沒有設置值，默認是1。可以使用百分比也可以使用小數表示。
4、投影drop-shadow(x偏移 y偏移 模糊范圍 顏色)
與 box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。filter:drop-shadow(2px 10px 0 rgba(255,0,0,0.5));
5、灰度 grayscale(%)
將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。若未設置，值默認是0。也可以寫0-1之間的小數。 filter:grayscale(0.5);
6、色相旋轉hue-rotate(deg)
給圖像應用色相旋轉。讓圖像中的顏色，在色相環中做對應的旋轉。值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。
這就是色相環~！
filter:hue-rotate(125deg);
7、反轉圖像invert(%)
反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。 filter:invert(100%);
8、opacity(%)
圖像的透明程度。值為0%則是完全透明，值為100%則圖像無變化。0-100%之間則是部分透明。也可以用0-1之間的小數替代%。
與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬件加速。
9、飽和度saturate(%)
值為0%則是完全不飽和，值為100%則圖像無變化。大於100%，則飽和度增高，色彩就會變重。filter:saturate(200%);
將圖像轉換為深褐色。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0。filter:sepia(100%);
以上各個濾鏡效果可以結合使用，注意: 順序是非常重要的，如果順序變了，最后的效果也會發生變化。filter:invert(100%) sepia(100%) saturate(300%) ;
參考：https://blog.csdn.net/weixin_42703239/article/details/81843093