CSS之渐变

CSS渐变是通过使用渐变函数创建的，它允许你在两种或多种颜色之间显示平滑的过渡。CSS中有两种主要的渐变类型：线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。

1. 线性渐变(Linear Gradients)

线性渐变是从一个方向到另一个方向的渐变。你可以定义渐变的开始位置(start point)和结束位置(end point)，然后指定渐变的颜色。

.linear-gradient {
  background: linear-gradient(to right, red , blue);
}

2. 径向渐变(Radial Gradients)

径向渐变是从一个点向外扩散的渐变。你可以定义渐变的中心(center)，形状(shape)，大小(size)和颜色。

.radial-gradient {
  background: radial-gradient(circle, red, blue);
}

3. 重复渐变(Repeating Gradients)

重复渐变是一种可以重复渐变图案的方式。

.repeating-linear-gradient {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
 
.repeating-radial-gradient {
  background: repeating-radial-gradient(circle, red, yellow 10%, green 15%);
}

以上就是CSS渐变的基本用法，你可以根据自己的需求进行组合和变化。