CSS 圆锥渐变
CSS 圆锥渐变
圆锥渐变是颜色过渡围绕中心点旋转的渐变。
要创建圆锥渐变，您必须定义至少两种颜色。
句法
背景图像：圆锥渐变（[来自 角度] [在 位置,] 颜色 [程度]， 颜色 [程度], ...);
默认情况下， 角度 为 0 度，并且位置 是中心。
如果不 程度 指定后，颜色将会均匀分布在中心点周围。
圆锥渐变：三种颜色
下面的例子展示了三种颜色的圆锥渐变：
圆锥渐变：五种颜色
下面的例子展示了一个有五种颜色的圆锥渐变：
圆锥渐变：三种颜色和度数
下面的例子展示了一个有三种颜色和每种颜色一个度数的圆锥渐变：
创建饼图
只需添加 border-radius: 50% 使圆锥渐变看起来像一个饼：
这是另一个饼图，其中所有颜色都定义了度数：
指定角度的圆锥渐变
[来自 角度] 指定整个圆锥渐变旋转的角度。
下面的例子展示了一个角度为 90 度的圆锥渐变：
指定中心位置的圆锥渐变
[在 位置] 指定圆锥渐变的中心。
下面的例子展示了一个中心位置为 60% 45% 的圆锥渐变：
重复圆锥渐变
这 repeating-conic-gradient() 函数用于重复圆锥梯度：
这是一个具有定义颜色起点和颜色终点的重复圆锥渐变：
CSS 渐变函数
下表列出了 CSS 渐变函数：
| 功能 | 描述 |
|---|---|
| 圆锥梯度（） | 创建圆锥渐变。定义至少两种颜色（围绕中心点） |
| 线性梯度() | 创建线性渐变。定义至少两种颜色（从上到下） |
| 径向梯度() | 创建径向渐变。定义至少两种颜色（从中心到边缘） |
| 重复圆锥梯度（） | 重复圆锥渐变 |
| 重复线性渐变（） | 重复线性渐变 |
| 重复径向渐变（） | 重复径向渐变 |
