CSS conic-gradient() 函数

定义和用法

conic-gradient() 函数将圆锥渐变设置为背景图像。

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

如需创建圆锥渐变，您必须至少定义两个色标。

锥形渐变的例子：

版本： CSS3

另请参阅：

CSS 教程：CSS 渐变

实例

例子 1

有三种颜色的圆锥渐变：

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

亲自试一试

提示：页面底部提供更多实例。

CSS 语法

background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
值 描述
from angle 可选。整个锥形渐变旋转此角度。默认值为 0 度。
at position 可选。规定圆锥渐变的渐变中心。默认值为 center。
color degree, ..., color degree

色标是您想要呈现平滑过渡的颜色。

该值由一个颜色值和一个可选的停止位置（介于 0 和 360 之间的度数或介于 0% 和 100% 之间的百分比）组成。

更多实例

例子 2

有五种颜色的圆锥渐变：

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

亲自试一试

例子 3

有三种颜色和每种颜色的度数的圆锥渐变：

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

亲自试一试

例子 4

通过添加 border-radius: 50% 使锥形渐变看起来像饼图：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

亲自试一试

例子 5

规定了 from angle 的圆锥渐变：

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

亲自试一试

例子 6

规定了 at position 的圆锥渐变：

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 7

规定了 from angle 和 at position 的圆锥渐变：

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 8

另一个饼图：

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome IE / Edge Firefox Safari Opera
69.0 79.0 83.0 12.1 56.0