CSS 的 filter 濾鏡功能非常好用，除了不用一直設定 CSS 的屬性外，也是讓效果透過簡單的程式碼就可以解決！如果懶得再用 Photoshop 調整圖片，也是一個不錯的選擇！
語法相當簡單，就是在想要做特效的標籤中加入 filter:濾鏡效果(參數); 就可以了，例如：
1 | img { |
濾鏡效果如下：
drop-shadow 下拉陰影
drop-shadow 會按照元素的原始內容去產生陰影，而 box-shadow 則是以區塊的方式來產生。
語法:filter: drop-shadow(8px 8px 10px #000); 其對應位置與 box-shadow 相同。
- 格式：(水平 垂直 模糊度 擴散 顏色)
- 水平/垂直(px)：設定陰影的位置
- 模糊度(px)：設定陰影模糊程度，值越大就越模糊
- 擴大(px)：設定陰影模糊放大的程度，一樣是值越大就越就越大
- 顏色(色碼)：設定陰影的顏色
blur 高斯模糊
高斯模糊的參數單位使用 px 或是 rem，0 為最清晰，數值越高越模糊，不接受百分比 % 做為單位，可以輸入，但不會產生效果。
grayscale 灰階
灰階程度，參數單位為小數點 (ex.0.7) 或是 70% 的灰階，皆為相同效果。
hue-rotate 色相旋轉
以度(deg)為單位，0 度 與 180 度效果相同，90 度與 270 度效果相同，另外可使用 turn 做為旋轉的幅度，
ex.
1為一圈360 度，0.5turn為180 度，但我懶得轉換運算，所以大多用度來設定。
invert 負片效果
以小數點或百分比為單位，0.3 跟 30% 的效果相同。50% 的效果會變成全灰。
opacity 透明度
以小數點或百分比為單位，0.3 跟 30% 的效果相同。
saturate 飽和度
以百分比為單位，0% 為無效果，100% 正常飽和度，200%過飽和度。
sepia 懷舊
以小數點或百分比為單位，0.3 跟 30% 的效果相同。
contrast 對比度
以小數點或百分比為單位，初始值 100%，大於對比變大，小於對比變小。
brightness 亮度
初始值 100%，大於就變亮，小於就變暗。
參考資料：