CSS 以往可以設定的漸層只有線性跟放射狀漸層,現在多了新的漸層填色方式 conic-gradient(),用中文翻大概就是錐狀漸層這樣吧。
先看簡單的應用,直接設定幾個顏色:
background: conic-gradient(red, orange, yellow, green, blue);
就會長出這樣的漸層填色:
顏色可以加上位置,用角度表示:
background: conic-gradient(red 50deg, orange 120deg, yellow 240deg, green 300deg);
可以像這樣設定顏色的角度區間:
background: conic-gradient(red 40deg 120deg, blue 180deg 240deg, green 300deg 360deg);
原本起始的角度是從 0度開始,這邊可以加上 from 設定起始的角度:
background: conic-gradient(from 30deg, red 30deg, blue 240deg, green 300deg);
也可以 用 at 改變中心點的位置:
background: conic-gradient(from 30deg at 60px 50%, red 30deg, blue 240deg, green 300deg);