過去 CSS 要使用模糊、對比度、亮度等影像濾鏡函式時，需要加上「-webkit-」開頭識別名稱，隨著瀏覽器的進步，只要使用 filter 樣式屬性搭配 blur()、brightness()、contrast()、invert()、drop-shadow()、opacity()、grayscale() 等濾鏡函式，就能做出各種饒富創意的網頁特效，這個單元會介紹 CSS 的 filter 與「影像濾鏡」 CSS 函式。

影片重點：

• 00:01:04 blur() 高斯模糊
• 00:02:33 brightness() 亮度
• 00:04:06 contrast() 對比度
• 00:04:58 grayscale() 灰階效果
• 00:05:44 invert() 負片效果
• 00:06:52 sepia() 棕褐色效果
• 00:07:40 saturate() 飽和度 ( 彩度 )
• 00:08:32 opacity() 透明度
• 00:09:30 hue-rotate() 色相
• 00:10:46 drop-shadow() 陰影

相關參考：

• 教學文：CSS 影像濾鏡 filter
• 影片連結：https://www.youtube.com/watch?v=TGK-g8HAWrY

後記

最近網路上看起來重點都是 Google Nano Banana 和 Google AI 的基礎認證，看起來好像也要花一點時間考一下認證比較好，雖然考完也不知道要幹麻 XD

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html