在 CSS 中，函数 conic-gradient() 在创建包含围绕中心点旋转颜色过渡的渐变的图像时非常有用。生成的图像是一个特殊图像，具有 <gradient> 数据类型。
给出的名称是圆锥曲线，因为图像看起来像从上方看锥体，因为一侧的颜色比另一侧更亮。
概述
圆锥曲线没有内在的梯度尺寸，这意味着图像没有首选尺寸或长宽比。
图像的尺寸将与其应用的元素的尺寸或图像的尺寸相匹配。
<gradient> 数据类型只能在 使用 <image> 的地方使用。
conic-gradient() 函数不能与 <color> 数据类型和属性，例如背景颜色。
为了创建重复的圆锥曲线，您需要使用CSS 函数 repeating-conic-gradient()，填充 360 度旋转。
可能的值
函数 conic-gradient() 可以使用以下值作为参数:
1. <angle>:值指定顺时针方向的渐变旋转。将值作为角度，前面加上关键字 from。
2. <position>:
确定渐变的中心。
使用与background-position属性相同的长度、顺序和关键字。
未指定值时，设置默认值是中心。
3. <angular-color-stop>:由颜色停止点的 <color> 值以及停止位置的一个或两个可选值组成，该值是沿颜色停止的角度渐变的圆周轴。
4. <color-hint>:确定相邻颜色停止点之间的渐变进程。当未指定值时，颜色过渡的中点是两个颜色停止点之间的中点。
语法
<conic-gradient()> =
conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || ,
<color-interpolation-method> , <angular-color-stop-list> ) CSS conic-gradient() - 组合
圆锥渐变是两种或多种颜色围绕渐变弧（圆的圆周）逐渐过渡，而不是在从渐变中心开始的渐变线上。
颜色过渡发生在圆心周围，从顶部开始并沿顺时针方向进行。
圆锥渐变是通过指示旋转角度来定义的、渐变中心，最后指定颜色停止点列表。
颜色停止点是使用角度值放置的，这与使用长度和百分比的线性和径向渐变不同。给出值。
用于指定值的单位为 deg（度数）、grad（梯度）、rad（弧度）、turn（圈数）。有 360 度、400 度、2pie 弧度和 1 圈。
渐变位置的值与 2 值背景的语法类似 -位置。
渐变的周长是渐变的弧度。梯度的起点是中午 12:00 或北方。渐变的旋转由顺时针方向的起始角度决定。
成角度的颜色停止点及其起点和终点决定渐变的颜色。使用相邻颜色色标之间的颜色提示，您可以更改颜色之间的过渡。
支持二次曲线渐变的浏览器接受百分比值，其中 100% 等于 360 度。
CSS conic-gradient(): 自定义
可以通过多种方式自定义渐变。您可以在渐变弧上添加更多有角度的颜色停止点，使用 <angle> 更改颜色停止点的位置，通过颜色提示将颜色过渡中点移动到两个颜色停止点之间的任意点，等等。
色标列表应按升序排列。较低值的后续色标会覆盖前一个色标的值，从而导致硬过渡。
不仅仅是圆形图形，还可以使用圆锥渐变创建棋盘格。
CSS conic-gradient(): 基本示例
为了创建基本的圆锥渐变，您只需要两种颜色。默认情况下，渐变中心位于 50% 50% 标记处；渐变的开始面朝上。让我们看一个例子:
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
.basic-conic-gradient {
background: conic-gradient(red, yellow);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Basic Conic Gradient</h1>
<div class="basic-conic-gradient"></div>
</body>
</html> CSS conic-gradient(): 中心定位
圆锥渐变的中心可以使用关键字、百分比或绝对长度来定位，与关键字 at。让我们看一个例子:
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
.position-center-gradient {
background: conic-gradient(at 0% 20%, red 10%, gold 40%, green 50%);
}
</style>
</head>
<body>
<h1>Position Center Gradient</h1>
<div class="position-center-gradient"></div>
</body>
</html> CSS conic-gradient(): 角度变化
以下是角度变化的示例。
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
.angle-change-gradient {
background: conic-gradient(from 35deg, red 10%, gold 50%, green 75%, lightgreen);
border-radius: 30%;
}
</style>
</head>
<body>
<h1>Angle Change Gradient</h1>
<div class="angle-change-gradient"></div>
</body>
</html>