CSS 圆锥渐变
CSS 圆锥渐变
圆锥渐变是一种以中心点为圆心，颜色过渡呈旋转状的渐变。
创建圆锥渐变需要定义至少两种颜色。
语法
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
默认情况下，angle 为 0deg，position 为 center。
如果没有指定degree，颜色将在中心点周围平均分布。
圆锥渐变：三种颜色
以下示例展示了使用三种颜色的圆锥渐变
圆锥渐变：五种颜色
以下示例展示了使用五种颜色的圆锥渐变
圆锥渐变：三种颜色和角度
以下示例展示了使用三种颜色和每个颜色对应的角度的圆锥渐变
示例
使用三种颜色和每个颜色对应的角度的圆锥渐变
#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 angle] 用于指定整个圆锥渐变的旋转角度。
以下示例展示了起始角度为 90deg 的圆锥渐变
示例
起始角度为 90deg 的圆锥渐变
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}
尝试一下 »
指定中心位置的圆锥渐变
[at position] 用于指定圆锥渐变的中心位置。
以下示例展示了中心位置为 60% 45% 的圆锥渐变
重复圆锥渐变
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() | 重复径向渐变 |
