CSS 錐形漸變
CSS 錐形漸變
錐形漸變是圍繞中心點旋轉顏色過渡的漸變。
要建立錐形漸變，您必須定義至少兩種顏色。
語法
background-image: conic-gradient([from 角度] [at 位置,] 顏色 [度數], 顏色 [度數], ...);
預設情況下，角度為 0deg，位置為 center。
如果沒有指定度數，顏色將在中心點均勻分佈。
錐形漸變：三種顏色
以下示例顯示了具有三種顏色的錐形漸變
錐形漸變：五種顏色
以下示例顯示了具有五種顏色的錐形漸變
示例
帶有五種顏色的錐形漸變
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
自己動手試一試 »
錐形漸變：三種顏色和度數
以下示例顯示了具有三種顏色以及每種顏色的度數的錐形漸變
示例
帶有三種顏色和每種顏色的度數的錐形漸變
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
自己動手試一試 »
建立餅圖
只需新增 border-radius: 50% 即可使錐形漸變看起來像一個餅圖
示例
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
自己動手試一試 »
這是另一個具有已定義顏色的度數的餅圖
示例
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
自己動手試一試 »
帶有指定起始角度的錐形漸變
[from 角度] 指定了整個錐形漸變旋轉的角度。
以下示例顯示了起始角度為 90deg 的錐形漸變
帶有指定中心位置的錐形漸變
[at 位置] 指定了錐形漸變的中心。
以下示例顯示了中心位置為 60% 45% 的錐形漸變
示例
帶有指定中心位置的錐形漸變
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
自己動手試一試 »
重複錐形漸變
repeating-conic-gradient() 函式用於重複錐形漸變
示例
重複的錐形漸變
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
自己動手試一試 »
這裡有一個具有已定義顏色起始和結束點的重複錐形漸變
示例
具有已定義顏色起始和結束點的重複錐形漸變
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
自己動手試一試 »
CSS 漸變函式
下表列出了 CSS 漸變函式
| 函式 | 描述 |
|---|---|
| conic-gradient() | 建立錐形漸變。至少定義兩種顏色（圍繞中心點） |
| linear-gradient() | 建立線性漸變。至少定義兩種顏色（從上到下） |
| radial-gradient() | 建立徑向漸變。至少定義兩種顏色（從中心到邊緣） |
| repeating-conic-gradient() | 重複錐形漸變 |
| repeating-linear-gradient() | 重複線性漸變 |
| repeating-radial-gradient() | 重複徑向漸變 |
