CSS conic-gradient() 函式
更多“自己嘗試”的例子見下文。
定義和用法
conic-gradient() 函式將一個錐形漸變設定為背景影像。
錐形漸變是一種圍繞中心點旋轉顏色過渡的漸變。
要建立錐形漸變，您必須定義至少兩個顏色停止點。
錐形漸變示例
| 版本 | CSS3 |
|---|
瀏覽器支援
表中數字表示該函式完全支援的第一個瀏覽器版本。
| 函式 | |||||
|---|---|---|---|---|---|
| conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS 語法
background-image: conic-gradient([from 角度] [at 位置,] 顏色 角度, 顏色 角度, ...);
| 值 | 描述 |
|---|---|
| from 角度 | 可選。整個錐形漸變將由該角度旋轉。預設值為 0deg |
| at 位置 | 可選。指定錐形漸變的中心點。預設值為 center |
| 顏色 角度, ..., 顏色 角度 | 顏色停止點是您想要平滑過渡的顏色。此值由顏色值後跟可選的停止位置（一個介於 0 和 360 之間的度數或介於 0% 和 100% 之間的百分比）組成。 |
更多示例
示例
一個包含五種顏色的錐形漸變
#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%;
}
自己動手試一試 »
示例
帶有 from 角度的錐形漸變
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
自己動手試一試 »
示例
帶有 at 位置的錐形漸變
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
自己動手試一試 »
示例
同時帶有 from 角度和 at 位置的錐形漸變
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
自己動手試一試 »
示例
另一個餅圖
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 漸變
