CSS 径向渐变
CSS 径向渐变
径向渐变由其中心定义。
要创建径向渐变，您还必须定义至少两个颜色停靠点。
语法
background-image: radial-gradient(形状 大小 at 位置, 开始颜色, ..., 结束颜色);
默认情况下，形状为椭圆，大小为最远角，位置为中心。
径向渐变 - 均匀间隔的颜色停靠点（这是默认值）
以下示例显示了一个具有均匀间隔的颜色停靠点的径向渐变
径向渐变 - 不同间隔的颜色停靠点
以下示例显示了一个具有不同间隔的颜色停靠点的径向渐变
设置形状
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() 函数用于重复径向渐变
