在CSS中，函数repeating-conic-gradient()对于创建包含重复渐变且颜色过渡围绕中心点旋转的图像非常有用。生成的图像是一个特殊图像，具有 <gradient> 数据类型。
概述
当第一个和最后一个颜色停止点都不包含大于 0 度或小于 360 度的颜色停止点角度时，圆锥渐变将不会重复。
圆锥曲线没有固有尺寸，这意味着图像没有首选尺寸或纵横比。
图像的大小将与其应用的元素的大小或图像的大小相匹配。
只能使用 <gradient> 数据类型其中使用了 <image>的地方使用。
不能使用 conic-gradient() 函数使用 <color> 数据类型和背景颜色等属性一起使用。
为了创建不重复的圆锥渐变，需要使用CSS函数conic-gradient()，或者使渐变成为一个完整的渐变360 度旋转。
可能的值
函数repeating-conic-gradient() 可以使用以下值作为参数:
1. <angle>:值指定顺时针方向的渐变旋转。将值作为角度，前面加上关键字 from。
2. <position>:
确定渐变的中心。
使用与background-position属性相同的长度、顺序和关键字。
未指定值时，设置默认值是center。
3. <angular-color-stop>:由颜色停止点的 <color> 值以及停止位置的一个或两个可选值组成，该值是沿颜色停止的角度梯度的圆周轴。重复渐变的大小由最后一个色标减去第一个色标角度确定。
4. <color-hint>:确定相邻颜色停止点之间的渐变进程。当未指定值时，颜色过渡的中点是两个颜色停止点之间的中点。
语法
repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...); 了解重复圆锥渐变
Repeating-conic-gradient 的语法类似于conic-gradient和Repeating-radial-gradient。色标位于渐变弧周围。圆锥渐变重复部分的大小等于第一个色标减去最后一个色标的角度。
对于要重复的圆锥渐变，您需要指定第一个和最后一个颜色停止点。色标位于圆的圆周周围，而不是位于从渐变中心开始的渐变线上。
颜色过渡发生在圆心周围，从顶部开始（当未指定from <angle>时）并沿顺时针方向进行。
圆锥渐变是通过指示旋转角度、渐变中心并最后指定颜色停止点列表来定义的。
色标是使用角度值放置的，这与给定长度和百分比值的线性和径向渐变不同。
用于指定值的单位为 deg（度数）、grad（梯度）、rad（弧度）、turn（圈数）。有 360 度、400 度、2pie 弧度和 1 圈。
渐变位置的值与 2 值背景的语法类似。
渐变的周长是渐变的弧度。梯度的起点是中午 12:00 或北方。渐变的旋转由顺时针方向的起始角度决定。
成角度的颜色停止点及其起点和终点决定渐变的颜色。使用相邻颜色色标之间的颜色提示，您可以更改颜色之间的过渡。
支持重复圆锥曲线渐变的浏览器接受百分比值，其中 100% 等于 360 度。
渐变的自定义
渐变可以通过多种方式自定义。您可以在渐变弧上添加更多有角度的颜色停止点，使用 <angle> 更改颜色停止点的位置，将颜色过渡中点移动到任意位置两个色标之间的点，通过颜色提示等。
当未定义色标的位置时，它位于前一个色标和前一个色标之间的中间位置。其后面的色标。
如果没有为第一个或最后一个色标指定角度，则值将分别为 0deg 和 360deg。
当没有为它们中的任何一个定义角度时，结果是圆锥曲线。
当为第一个或最后一个颜色停止点，渐变将根据指定的值重复。
默认情况下，一个颜色停止处的颜色将平滑过渡到后续颜色停止处的颜色。
通过添加颜色提示，可以将颜色过渡中点移动到两个颜色停止点之间的任意点。
颜色当两个或多个颜色停止点位于同一位置时，过渡将是第一个和最后一个颜色停止点之间的硬线。
它是建议不要混合搭配不同的角度单位来创建重复圆锥渐变，因为这会使 CSS 难以读取它。
辅助功能问题:辅助技术没有太多关于背景图像的特殊信息，因为浏览器不提供它们。屏幕阅读器不会读取或读出由二次曲线梯度表示的图像。因此，如果图像列出了关键信息，建议对其进行语义描述。
CSS Repeating-conic-gradient(): 角度值
这里是一个示例重复圆锥渐变，其中起始角度与颜色停止点及其以度为单位的值一起定义:
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
.repeat-conic-gradient {
background: repeating-conic-gradient(
from 0deg,
blue 0deg 45deg,
lightgreen 45deg 60deg);
}
</style>
</head>
<body>
<h1>Repeating Conic Gradient</h1>
<div class="repeat-conic-gradient"></div>
</body>
</html> CSS Repeating-conic-gradient(): 示例2
这里是一个示例重复圆锥渐变，带有红色和黑色星爆:
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
}
.repeat-conic {
background-image: repeating-conic-gradient(red 0 19deg, black 19deg 28deg);
}
</style>
</head>
<body>
<h1>Repeating conic gradient</h1>
<div class="repeat-conic"></div>
</body>
</html>