使用 CSS 製作錐狀漸層- conic-gradient()

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);