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

分享:
標籤: CSS CSS3

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