conic-gradient()

Baseline 广泛可用

此功能非常成熟，可以在许多设备和浏览器版本中使用。它自 2020年11月.

conic-gradient() CSS 函数创建一个图像，该图像包含一个渐变，其颜色过渡围绕中心点旋转（而不是从中心辐射）。圆锥形渐变示例包括饼图和色轮。conic-gradient() 函数的结果是 <gradient> 数据类型的对象，它是一种特殊的 <image>。

语法

css

/* A conic gradient rotated 45 degrees,
   starting blue and finishing red */
conic-gradient(from 45deg, blue, red)

/* A bluish purple box: the gradient goes from blue to red,
   but only the bottom right quadrant is visible, as the
   center of the conic gradient is at the top left corner */
conic-gradient(from 90deg at 0 0, blue, red)

/* Interpolation in polar color space
  with longer hue interpolation method */
conic-gradient(in hsl longer hue, red, blue, green, red)

/* Color wheel */
conic-gradient(
  hsl(360 100% 50%),
  hsl(315 100% 50%),
  hsl(270 100% 50%),
  hsl(225 100% 50%),
  hsl(180 100% 50%),
  hsl(135 100% 50%),
  hsl(90 100% 50%),
  hsl(45 100% 50%),
  hsl(0 100% 50%)
)

值

<angle>: 以 from 关键字开头，并以角度作为其值，定义渐变的顺时针旋转方向。
<position>: 使用与 background-position 属性相同的长度、顺序和关键字值，position 值定义渐变的中心。如果未指定，默认情况下 position 值为 center，这意味着渐变将居中。
<angular-color-stop>: 颜色停止的 <color> 值，后跟一个或两个可选的停止位置（<angle> 沿着渐变的圆周轴）。
<color-hint>: 一个插值提示，定义渐变如何在相邻颜色停止之间进展。长度定义了在两个颜色停止之间渐变颜色应到达颜色过渡中点的哪个位置。如果省略，颜色过渡的中点是两个颜色停止之间的中点。

注意： CSS 渐变中的颜色停止的渲染遵循与 SVG 渐变中颜色停止相同的规则。

描述

与任何渐变一样，圆锥渐变没有固有尺寸；即它没有自然或首选大小，也没有首选比例。它的具体大小将与它应用到的元素的大小相匹配，或者如果它设置为非元素大小的某个值，则与<image>的大小相匹配。

要创建一个重复以填充 360 度旋转的圆锥渐变，请使用repeating-conic-gradient() 函数。

由于<gradient>属于<image>数据类型，因此它们只能在可以使用<image>的地方使用。因此，conic-gradient()不适用于background-color和其他使用<color>数据类型的属性。

注意：为什么它被称为“圆锥”渐变？如果颜色停止在一侧比另一侧更亮，它可能看起来像从上面看到的圆锥体。

圆锥渐变的组成

圆锥渐变语法类似于径向渐变语法，但颜色停止位于渐变弧周围，即圆的圆周，而不是位于从渐变中心出现的渐变线上。使用圆锥渐变，颜色会像围绕圆的中心旋转一样过渡，从顶部开始并顺时针方向进行。在径向渐变中，颜色从椭圆的中心向外，向所有方向过渡。

color stops along the circumference of a conic gradient and the axis of a radial gradient.

圆锥渐变通过指示旋转角度、渐变中心，然后指定颜色停止列表来指定。与线性渐变和径向渐变不同，它们的顏色停止通过指定<length>来放置，圆锥渐变的顏色停止通过角度来指定。单位包括deg表示度、grad表示梯度、rad表示弧度和turn表示转数。一个圆圈中有 360 度、400 梯度、2π 弧度和 1 转。支持圆锥渐变的浏览器也接受百分比值，其中 100% 等于 360 度，但这不在规范中。

与径向渐变类似，圆锥渐变语法允许将渐变中心定位在图像内的任何位置，甚至在图像外部。位置的值类似于 2 值背景位置的语法。

渐变弧是渐变的圆周。渐变或弧的起点是北方或下午 12:00。然后渐变按from角度旋转。渐变的颜色由有角度的颜色停止、它们的起点、终点、以及它们之间和可选的有角度颜色停止点来确定。相邻颜色颜色停止之间的颜色过渡可以使用颜色提示来改变。

自定义渐变

通过在渐变弧上添加更多有角度的颜色停止点，可以创建多种颜色之间的高度自定义过渡。可以使用<angle>明确定义颜色停止的位置。如果不指定颜色停止的位置，则将其放置在它前面和后面一个颜色停止之间的一半位置。如果未指定第一个或最后一个颜色停止的角度，则它们的取值分别为 0deg 和 360deg。以下两个渐变是等效的

css

conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

默认情况下，颜色从一个颜色停止处的颜色平滑地过渡到后续颜色停止处的颜色，其中颜色之间的中点是颜色过渡之间的一半位置。可以通过添加颜色提示来将此颜色过渡中点移动到两个颜色停止之间的任何位置，指示颜色过渡的中间点应该在哪里。以下是从开始到 10% 标记的纯红色，在 80% 的转数内从红色过渡到蓝色，最后 10% 是纯蓝色。然而，红色到蓝色渐变变化的中点位于 20% 标记处，而不是没有 80grad 或 20% 颜色提示时的 50% 标记处。

css

conic-gradient(red 40grad, 80grad, blue 360grad);

如果两个或多个颜色停止位于相同的位置，则过渡将在该位置声明的第一个和最后一个颜色之间形成一条硬线。要使用圆锥渐变创建饼图 - 这不是创建饼图的正确方法，因为背景图像不可访问 - 请使用硬颜色停止，其中两个相邻颜色停止的颜色停止角度相同。最简单的方法是使用多个位置颜色停止。以下两个声明是等效的

css

conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);

颜色停止应该按升序排列。值较低的后续颜色停止将覆盖之前颜色停止的值，从而创建硬过渡。以下示例在 30% 标记处从红色变为黄色，然后在 35% 的渐变内从黄色变为蓝色

css

conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);

可以使用圆锥渐变创建其他效果。奇怪的是，棋盘图案就是其中之一。通过创建左上角和右下角为白色象限，左下角和右上角为黑色象限的象限，然后重复渐变 16 次（横向 4 次，纵向 4 次），可以制作棋盘。

css

conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;

当然，可以混合和匹配不同的角度单位，但不要这样做。以上内容难以阅读。

正式语法

<conic-gradient()> = 
  conic-gradient( [ <conic-gradient-syntax> ] )  

<conic-gradient-syntax> = 
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?  

<length-percentage> = 
  <length>      |
  <percentage>  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  

<color-stop-angle> = 
  <angle-percentage>{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>

div {
  width: 100px;
  height: 100px;
}

<div></div>

css

div {
  background-image: conic-gradient(from 40deg, #fff, #000);
}

偏心渐变

div {
  width: 100px;
  height: 100px;
}

<div></div>

css

div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}

渐变饼图

此示例使用多位置颜色停止，相邻颜色具有相同颜色停止值，从而创建条纹效果。

div {
  width: 100px;
  height: 100px;
}

<div></div>

css

div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

棋盘图案

div {
  width: 100px;
  height: 100px;
}

<div></div>

css

div {
  background: conic-gradient(
      #fff 0.25turn,
      #000 0.25turn 0.5turn,
      #fff 0.5turn 0.75turn,
      #000 0.75turn
    )
    top left / 25% 25% repeat;
  border: 1px solid;
}

使用色调插值

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

在此插值示例中，使用hsl颜色系统，并对色调进行插值。

css

.shorter {
  background-image: conic-gradient(in hsl shorter hue, red, blue);
}

.longer {
  background-image: conic-gradient(in hsl longer hue, red, blue);
}

左侧的框使用较短插值，这意味着颜色直接从红色变为蓝色，使用色轮上的较短弧。右侧的框使用较长插值，这意味着颜色从红色变为蓝色，使用较长弧，穿过绿色、黄色和橙色。

规范

规范
CSS 图像模块级别 4 # 圆锥渐变

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

Using CSS gradients
其他渐变函数：repeating-conic-gradient()、linear-gradient()、repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
image()
element()
image-set()
cross-fade()