CSS3 conic-gradient() 函数

三种颜色的圆锥渐变：

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

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
conic-gradient()	69.0	79.0	83.0	12.1	56.0

conic-gradient() 函数创建一个由渐变组成的图像。

圆锥渐变是颜色过渡围绕中心点旋转（而不是从中心向外辐射）。

创建圆锥渐变，至少需要设置两个色标。

支持版本：CSS3

语法

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

属性值

值	描述
from angle	可选。起始角度。默认值为 0deg
at position	可选。中心位置。默认居中。
color degree, ..., color degree	角渐变断点。该值包含一个颜色值，后跟一个可选的停止位置（ 0 到 360 之间的度数或 0% 到 100% 之间的百分比）。

background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);

代码解析：

• red 0deg, red 90deg 表示 0～90 度区间使用红色 red。
• yellow 90deg, yellow 180deg 表示 90～180 度区间使用黄色 yellow。
• green 180deg 表示 180～360 度区间使用绿色 green。

实例

<style scoped>
.demo-conic-gradient {
  height: 200px;
  width: 200px;
  background-color: red; /* 对于不支持渐变的浏览器 */
}
.conic-gradient-1 {
  background: conic-gradient(red, orange, yellow, green, blue);
}
.conic-gradient-2 {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
.conic-gradient-3 {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}
.conic-gradient-4 {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}
.conic-gradient-5 {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}
.conic-gradient-6 {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}
.conic-gradient-7 {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}
</style>

五种颜色的圆锥渐变：

<div class="demo-conic-gradient conic-gradient-1"></div>

三种颜色圆锥渐变，并设置每种渐变度数：

<div class="demo-conic-gradient conic-gradient-2"></div>

通过设置 border-radius: 50% 把圆锥渐变变成一个圆：

<div class="demo-conic-gradient conic-gradient-3"></div>

设置起始角度：

<div class="demo-conic-gradient conic-gradient-4"></div>

指定中心位置：

<div class="demo-conic-gradient conic-gradient-5"></div>

指定一个位置，并且设置一个角度：

<div class="demo-conic-gradient conic-gradient-6"></div>

一个饼图：

<div class="demo-conic-gradient conic-gradient-7"></div>

效果：

五种颜色的圆锥渐变：

三种颜色圆锥渐变，并设置每种渐变度数：

通过设置 border-radius: 50% 把圆锥渐变变成一个圆：

设置起始角度：

指定中心位置：

指定一个位置，并且设置一个角度：

一个饼图：