CSS filter簡單來說就是濾鏡功能，以下整理幾個常用的功能。

1.blur模糊(px)

越大越模糊，如果想要朦朧美就參考這個吧！

filter:blur(2px);

2.brightness亮度(%)

• 100%表示不變
• 小於100%是減少亮度
• 大於100%則是增加亮度
• 設成0%會讓影像完全變黑。
  
  filter:brightness(1.5);

3.grayscale灰階(%)

2020發生許多憾事，舉凡黑鷹事件、武漢肺炎、Kobe過世。RIP！

• 0% 原始影像
• 100% 完整的灰白照片
  
  filter:grayscale(1);

4.opacity不透明(%)

就是影像不透明的程度。

• 0完全透明
• 1就是原始圖
  
  filter:opacity(.5);

5.sepia 懷舊(%)

想要有走復古風就選這個吧！

• 0% 原圖
• 100% 完整的泛黃顏色
  
  filter:sepia(1);

6.saturate飽和(%)

• 100%表示不變
• 小於100%降低飽和度
• 大於100%增加飽和度
  
  filter:saturate(1.2);

我們可以利用filter使:hover效果更豐富。
:hover範例
最後我們要瞭解，知道跟可以用是兩回事，filter不支援IE、filter不支援IE，
很重要所以說兩次！
附上Can I use