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(下)的使用,如有问题欢迎私信和评论