CSS 好用的 filter 屬性

加上 filter 後質感立馬提升！

列表

主要會用在圖片上的屬性（但不僅限於圖片），簡單來說就是濾鏡，看範例最快！

filter: brightness() 設定明亮度

/* 設成 150% 也可以 */
img:hover {
  filter: brightness(1.5);
}

filter: blur() 設定模糊

img:hover {
  filter: blur(2px);
}

filter: contrast() 設定對比度

/* 也可以設成 1000% */
img:hover {
  filter: contrast(10);
}

filter: drop-shadow() 設定陰影

img:hover {
  filter: drop-shadow(16px 16px 20px aqua);
}

跟 box-shadow 的差異是它能判斷透明的部分，而不是直接加在外框上，參考下圖：

filter: grayscale() 設定灰階

img:hover {
  filter: grayscale(1);
}

filter: hue-rotate 色調旋鈕

暫時不知道能做什麼，但很酷！

img {
  animation-name: colorful;
  animation-duration: 2s;
}
@keyframes colorful {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

filter: invert 負片效果

/* 注意只有 0 ~ 100% 之間的值有效 */
img:hover {
  filter: invert(80%)
}

filter: saturate 飽和度

img:hover {
  filter: saturate(2)
}

filter: sepia 懷舊效果

/* 預設值為0，需要 0 ~ 1之間的值 */
img:hover {
  filter: sepia(0.5)
}