repeating-conic-gradient()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.

**repeating-conic-gradient()** CSS 函数 创建一个图像，该图像包含一个重复的渐变（而不是 单个渐变），其颜色过渡围绕中心点旋转（而不是 从中心辐射）。

试试看

语法

css
/* Starburst: a blue on blue starburst: the gradient
   is a starburst of lighter and darker blue,
   centered in the upper left quadrant,
   offset by 3degrees so there is no up/down straight line */
repeating-conic-gradient(
  from 3deg at 25% 25%,
  hsl(200 100% 50%) 0deg 15deg,
  hsl(200 100% 60%) 10deg 30deg
)

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

Values

<angle>

在 from 关键字之前，并以角度作为其值，定义渐变的顺时针旋转方向。

<position>

使用与 background-position 属性相同的长度、顺序和关键字值，位置定义渐变的中心。如果省略，默认值为 center，这意味着渐变将居中。

<angular-color-stop>

颜色停止的 <color> 值，后跟一个或两个可选停止位置（<angle> 沿着渐变的圆周轴）。最后一个颜色停止减去第一个颜色停止角度定义重复渐变的大小。

<color-hint>

一个 插值 提示，定义渐变在相邻颜色停止之间如何进展。长度定义在两个颜色停止之间渐变颜色应达到颜色过渡中点的哪个点。如果省略，颜色过渡的中点是两个颜色停止之间的中点。

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

描述

示例重复圆锥形渐变包括星爆。repeating-conic-gradient() 函数的结果是 <gradient> 数据类型的一个对象，这是一种特殊的 <image>。

如果第一个和最后一个颜色停止都不包含大于 0deg 或小于 360 度的颜色停止角度，则圆锥形渐变将不会重复。

与任何渐变一样，重复圆锥形渐变具有 没有内在尺寸；即，它没有自然或首选大小，也没有首选比例。它的具体大小将匹配它所应用的元素的大小，或者如果它被设置为除元素大小以外的其他大小，则匹配它被设置为的大小。

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

**注意：** 要创建一个不重复的圆锥形渐变，请使渐变为 360 度全旋转，或使用 conic-gradient() 函数。

理解重复圆锥形渐变

重复圆锥渐变语法类似于 conic-gradient() 和 repeating-radial-gradient() 语法。与非重复圆锥渐变一样，颜色停留在渐变弧线上。与重复径向渐变一样，重复部分的大小是第一个颜色停留在最后一个颜色停留在的角度上减去。

Comparison of the color stops for repeating and non-repeating conic and radial gradients

以上渐变定义为三分之一蓝色、三分之一红色和三分之一黄色。

css
repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

对于重复渐变，我们定义第一个和最后一个颜色停留在。与非重复渐变一样，第一个和最后一个颜色停留在假定为 0 和 100% 或 360deg（如果未明确声明）。当默认为这些值时，重复弧线为 360 度，因此不会重复。

与非重复圆锥渐变一样，颜色停留在渐变弧线上——圆的周长，而不是从渐变中心的梯度线上。颜色像在圆的中心旋转一样过渡，如果未声明 from <angle>，则从顶部开始，并按从大到小的角度的差值的大小顺时针方向旋转，然后重复。

重复圆锥渐变通过指定旋转角度、渐变的中心，然后指定颜色停留在列表来指定。与非重复圆锥渐变一样，重复圆锥渐变的颜色停留在使用 <angle> 指定。单位包括用于度数的 deg、用于梯度的 grad、用于弧度的 rad 和用于转数的 turn。圆中包含 360 度、400 梯度、2π 弧度和 1 转。支持重复圆锥渐变的浏览器也接受百分比值，其中 100% 等于 360 度，但这不在规范中。

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

渐变弧线是渐变周长的一部分。0 度是北方，或下午 12:00。渐变的颜色由有角度的颜色停留在、它们的起点、终点以及它们之间和可选的有角度的颜色停留在点决定。颜色之间过渡可以使用相邻颜色颜色停留在之间的颜色提示进行更改。

自定义渐变

通过在渐变弧线上添加更多有角度的颜色停留在点，您可以创建多个颜色之间的高度自定义过渡。颜色停留在的位置可以使用 <angle> 明确定义。如果您未指定颜色停留在的位置，它将放置在其前面的颜色停留在和后面的颜色停留在之间。与非重复渐变对应物一样，如果您未指定第一个或最后一个颜色停留在的角度，则其值为 0deg 和 360deg。如果您未声明任何一个角度，您将获得非重复圆锥渐变。如果您分别为第一个或最后一个声明非 0 或 360 度，则渐变将基于该值重复。例如，如果您未声明第一个颜色停留在的角度，并在最后一个颜色停留在上声明 10%，则弧线将重复 10 次。相反，起点是声明的第一个颜色停留在，而最后一个颜色停留在是声明的最后一个颜色停留在的角度。以下两个渐变等效。

css
repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

默认情况下，颜色从一个颜色停留在的颜色平滑地过渡到后续颜色停留在的颜色，颜色之间的中点是颜色过渡的中点。您可以通过添加颜色提示将此颜色过渡中点移动到两个颜色停留在之间的任何点，指示颜色过渡的中间位置应该在哪里。

如果两个或多个颜色停留在位于相同的位置，则过渡将是该位置上声明的第一个和最后一个颜色之间的硬线。

虽然您可以混合和匹配不同的角度单位，但不要这样做。它使 CSS 难以阅读。

正式语法

<repeating-conic-gradient()> = 
  repeating-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>

无障碍

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这主要对于屏幕阅读器很重要，因为屏幕阅读器不会宣布它的存在，因此不会向用户传达任何信息。虽然可以使用圆锥渐变创建饼图、棋盘格和其他效果，但 CSS 图像没有提供分配替代文本的本机方法，因此由圆锥渐变表示的图像将无法被屏幕阅读器用户访问。如果图像包含理解页面整体目的的关键信息，最好在文档中以语义方式描述它。

示例

黑白星爆

css
div {
  background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}

偏心渐变

此渐变重复 18 次，但由于我们只看到右半部分，所以我们只看到 9 次重复。

css
div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}

使用色调插值

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

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

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

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

更多重复圆锥渐变示例

请参阅 使用 CSS 渐变 获取更多示例。

规范

规范
CSS 图像模块级别 4
# repeating-gradients

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅