CSS 除了可以使用「單一顏色」設定樣式，也能使用「漸層色」函式來產生線性漸層、放射漸層或重複漸層等色彩效果，這個單元會介紹「漸層色」相關的 CSS 函式，例如 linear-gradient()、radial-gradient()、conic-gradient() 等等，透過多種顏色位置的設定，讓網頁的色彩更豐富更多變化。

影片重點：

• 00:00:58 linear-gradient() 線性漸層
• 00:03:36 linear-gradient() 線性漸層角度名稱
• 00:04:54 linear-gradient() 線性漸層進階技巧
• 00:07:23 repeating-linear-gradient() 線性重複漸層
• 00:12:06 radial-gradient() 放射狀漸層
• 00:15:34 radial-gradient() 放射狀漸層填滿方式
• 00:16:10 radial-gradient() 放射狀漸層中心點名稱
• 00:17:56 radial-gradient() 放射狀漸層進階技巧
• 00:20:05 repeating-radial-gradient() 放射狀重複漸層
• 00:23:02 conic-gradient() 圓錐形漸層
• 00:25:14 conic-gradient() 圓錐形漸層進階技巧
• 00:26:53 repeating-conic-gradient() 圓錐形重複漸層

相關參考：

• 教學文：CSS 漸層色 ( 函式類型 )
• 影片連結：https://www.youtube.com/watch?v=fpHWv4iL8E4

後記

漸層色這個單元我很久以前寫過一次，後來再寫一次的時候特別有感觸，也寫得更好了一點，今天有點小感冒，廢話就不多說了，咳咳咳~ 如果燒聲好像就沒辦法錄影片了哭哭......

更多參考：

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