CSS conic-gradient() 函数

最后更新于：2022-03-27 03:03:53

CSS conic-gradient() 函数

CSS conic-gradient() 函数 CSS 函数

实例

三种颜色的圆锥渐变：

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

尝试一下 »

定义与用法

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

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

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

圆锥渐变实例：

从图中可以看到，圆锥渐变的渐变方向和起始点。起始点是图形中心，然后以顺时针方向绕中心实现渐变效果。

版本: CSS3

浏览器支持

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

函数
conic-gradient() 69.0 79.0 83.0 12.1 56.0

CSS 语法

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% 之间的百分比）。

更多实例

实例

五种颜色的圆锥渐变：

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

尝试一下 »

实例

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

#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(from 90deg, red, yellow, green);
border-radius: 50%;
}

尝试一下 »

实例

指定中心位置：

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

尝试一下 »

实例

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

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

尝试一下 »

实例

一个饼图：

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

尝试一下 » 

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。

实例

创建一个取色卡：

#grad {
background: radial-gradient(closest-side, gray, transparent),
conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
border-radius: 50%;
}

尝试一下 »

CSS conic-gradient() 函数 CSS 函数