在 CSS 中，函数 conic-gradient（） 可用于创建包含渐变的图像，该渐变的颜色过渡围绕中心点旋转。生成的图像是<gradient>数据类型的特殊图像。
给出的名称是圆锥形的，因为图像从上方看起来像一个圆锥体，因为一侧的颜色停止比另一侧浅。
概述
- 圆锥渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
- 图像的大小将与它适用的元素的大小或图像的大小匹配。
- <gradient>数据类型只能在使用 <image> 的地方使用。
- conic-gradient（） 函数不能与 <color> 数据类型和 background-color 等属性一起使用。
- 为了创建一个自我重复的圆锥梯度，您需要使用 CSS 函数 repeating-conic-gradient（） 来填充 360 度旋转。
可能的值
函数 conic-gradient（） 可以将以下值作为参数：
1. <angle>：值指定顺时针方向的梯度旋转。将值作为角度，并在关键字 from 之前。
2、<position>：
- 确定渐变的中心。
- 使用与 background-position 属性相同的长度、顺序和关键字。
- 如果未指定任何值，则设置的默认值为 center。
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 个梯度、2 个饼弧度和 1 个圆圈。
- 梯度的 position 值类似于 2 值 background-position 的语法。
- 梯度的周长是梯度的弧。梯度的起点是中午 12：00 或北部。梯度的旋转由顺时针方向的起始角度确定。
- 倾斜的颜色停止点，它们的起点和结束点，决定了渐变的颜色。使用相邻颜色的颜色停止点之间的颜色提示，您可以更改颜色之间的过渡。
支持圆锥渐变的浏览器接受百分比值，其中 100% 等于 360 度。
CSS conic-gradient（） - 定制
可以通过多种方式自定义渐变。您可以在渐变弧上添加更多倾斜的色标点，使用<角度>更改色标的位置，通过颜色提示将颜色过渡中点移动到两个色标之间的任何点等。
色标列表应按升序排列。值较低的后续色标将覆盖前一个色标的值，从而导致硬过渡。
不仅可以使用圆形图形，还可以使用圆锥渐变创建棋盘。
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（） - 中心位置
圆锥梯度的中心可以使用关键字项、百分比或绝对长度进行定位，关键字位于。让我们看一个例子：
<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>
有关conic-gradient（）的更多示例，请单击此处。
