前端必知必会-CSS 渐变Gradients(下)

---

CSS 圆锥渐变

CSS 圆锥渐变
圆锥渐变是围绕中心点旋转的颜色过渡渐变。

要创建圆锥渐变，您必须定义至少两种颜色。

语法

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

默认情况下，角度为 0 度，位置为中心。

如果未指定度数，则颜色将均匀分布在中心点周围。

圆锥渐变：三种颜色

以下示例显示了具有三种颜色的圆锥渐变：

示例
具有三种颜色的圆锥渐变：

#grad {
background-image: conic-gradient(red, yellow, green);
}

圆锥渐变：五种颜色

以下示例显示了具有五种颜色的圆锥渐变：

示例
具有五种颜色的圆锥渐变：

#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}

圆锥渐变：三种颜色和度数

以下示例显示了具有三种颜色和每种颜色度数的圆锥渐变：

示例
具有三种颜色和每种颜色度数的圆锥渐变：

#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

创建饼图

只需添加 border-radius: 50% 即可使圆锥渐变看起来像饼：

示例

#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}

这是另一个饼图，其中定义了所有颜色的度数：

示例

#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}

具有指定起始角的圆锥渐变

[起始角] 指定整个圆锥渐变的旋转角度。

以下示例显示了起始角为 90 度的圆锥渐变：

示例
具有起始角的圆锥渐变：

#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}

具有指定中心位置的圆锥渐变

[at position] 指定圆锥渐变的中心。

以下示例显示了中心位置为 60% 45% 的圆锥渐变：

示例
具有指定中心位置的圆锥渐变：

#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

重复圆锥渐变

repeating-conic-gradient() 函数用于重复圆锥渐变：

示例
重复圆锥渐变：

#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}

以下是具有定义的颜色起点和颜色终点的重复圆锥渐变：

示例
具有定义的颜色起点和颜色终点的重复圆锥渐变：

#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}

CSS 渐变函数

下表列出了 CSS 渐变函数：

函数	描述
conic-gradient()	创建圆锥渐变。定义至少两种颜色（围绕中心点）
linear-gradient()	创建线性渐变。定义至少两种颜色（从上到下）
radial-gradient()	创建径向渐变。定义至少两种颜色（从中心到边缘）
repeating-conic-gradient()	重复圆锥渐变
repeating-linear-gradient()	重复线性渐变
repeating-radial-gradient()	重复径向渐变

---

总结

本文介绍了CSS 渐变Gradients(下)的使用，如有问题欢迎私信和评论