CSS 圆锥渐变

圆锥渐变是一种颜色过渡围绕中心点旋转的渐变。

要创建圆锥渐变，您必须定义至少两种颜色。

语法

background-image: conic-gradient([from angle] [at position,] color [ degree] , color [ degree] , ...);

默认情况下，角度是 0 度并且位置是中心。

如果不程度指定后，颜色将围绕中心点均匀分布。

圆锥渐变：三种颜色

以下示例显示了具有三种颜色的圆锥渐变：

示例

具有三种颜色的圆锥渐变：

#grad {
background-image: conic-gradient(red, yellow, green);
}

亲自试一试 »

圆锥渐变：五种颜色

以下示例显示了具有五种颜色的圆锥渐变：

示例

具有五种颜色的圆锥渐变：

#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%;
}

亲自试一试 »

指定角度的圆锥曲线

[来自角度] 指定整个圆锥渐变旋转的角度。

以下示例显示了起始角为 90 度的圆锥渐变：

示例

具有起始角的圆锥曲线：

#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}

亲自试一试 »

具有指定中心位置的圆锥渐变

[在位置] 指定圆锥渐变的中心。

以下示例显示了中心位置为 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 渐变函数：

Function	Description
conic-gradient()	Creates a conic gradient. Define at least two colors (around a center point)
linear-gradient()	Creates a linear gradient. Define at least two colors (top to bottom)
radial-gradient()	Creates a radial gradient. Define at least two colors (center to edges)
repeating-conic-gradient()	Repeats a conic gradient
repeating-linear-gradient()	Repeats a linear gradient
repeating-radial-gradient()	Repeats a radial gradient