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 渐变
