CSS如何设置自定义渐变色? 径向梯度篇

CSS径向梯度

径向梯度由中心定义。
要创建径向渐变，还必须定义至少两个颜色停止。

语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认情况下，形状为椭圆，大小为最远处的角，位置为中心。
径向渐变-均匀间隔颜色停止(这是默认)
下面的例子显示了一个均匀间隔颜色停止的径向渐变:

 

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

径向梯度-不同间隔的颜色停止

下面的例子显示了一个带有不同间距颜色停止的径向渐变:

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

 

设置形状

形状参数定义形状。它可以取圆或椭圆的值。默认值为ellipse。
下面的例子显示了一个圆形的径向梯度:

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

 

使用不同大小的关键字

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);
}

重复一个径向渐变

使用repeat -radial-gradient()函数重复径向梯度:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}