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() | 重复径向渐变 |
