CSS conic-gradient() 函数
下面还有更多“亲自尝试”的示例。
定义和用法
conic-gradient() 函数将圆锥渐变设置为背景图像。
圆锥渐变是一种颜色过渡围绕中心点旋转的渐变。
要创建圆锥渐变，您必须定义至少两个颜色停止点。
圆锥渐变示例
| 版本 | CSS3 |
|---|
浏览器支持
表中的数字指定了完全支持该函数的第一个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS 语法
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
| 值 | 描述 |
|---|---|
| from angle | 可选。整个圆锥渐变会根据此角度旋转。默认值为 0deg |
| at position | 可选。指定圆锥渐变的渐变中心。默认值为 center |
| color degree, ..., color degree | 颜色停止点是您希望在其中呈现平滑过渡的颜色。此值由一个颜色值组成，后跟一个可选的停止位置（0 到 360 之间的度数或 0% 到 100% 之间的百分比）。 |
更多示例
示例
一个包含三种颜色且每种颜色都有一个角度的圆锥渐变
#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(from 90deg, red, yellow, green);
border-radius: 50%;
}
亲自尝试 »
示例
一个带有位置的圆锥渐变
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
亲自尝试 »
示例
一个同时带有起始角度和位置的圆锥渐变
#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 渐变
