CSS 径向渐变
CSS 径向渐变
径向渐变由其中心定义。
要创建径向渐变，您还必须至少定义两个颜色停止点。
语法
background-image: radial-gradient(形状 大小 at 位置, 起始颜色, ..., 最终颜色);
默认情况下，形状为椭圆形，大小为farthest-corner，位置为center。
径向渐变 - 均匀分布的颜色停止点（默认）
以下示例显示了具有均匀分布颜色停止点的径向渐变
径向渐变 - 不同间隔的颜色停止点
以下示例显示了具有不同间隔颜色停止点的径向渐变
设置形状
shape 参数定义形状。它可以取值 circle 或 ellipse。默认值为 ellipse。
以下示例显示了圆形径向渐变
使用不同大小的关键词
size 参数定义渐变的大小。它可以取四个值
- closest-side
- farthest-side
- closest-corner
- farthest-corner
示例
具有不同大小关键词的径向渐变
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
自己动手试一试 »
重复径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
示例
一个重复的径向渐变
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
自己动手试一试 »
