很齐全的纯CSS来实现渐变效果

CSS 中的渐变类型主要有线性渐变（linear-gradient）、径向渐变（radial-gradient）和重复渐变（repeating-linear-gradient）和重复径向渐变（repeating-radial-gradient）。

解决方案：

1、线性渐变（linear-gradient）：

线性渐变是从一个方向（水平或垂直）的一端到另一端进行的。

/* 语法 */
.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}
 
/* 示例 */
.linear-gradient {
  background: linear-gradient(to right, red, yellow);
}

2、径向渐变（radial-gradient）：

径向渐变是从一个点向外扩散进行的。

/* 语法 */
.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}
 
/* 示例 */
.radial-gradient {
  background: radial-gradient(circle, red, yellow, green);
}

3、重复渐变（repeating-linear-gradient）：

重复渐变是一个重复的线性渐变。

/* 语法 */
.repeating-linear-gradient {
  background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
}
 
/* 示例 */
.repeating-linear-gradient {
  background: repeating-linear-gradient(to right, red, yellow 10%);
}

4、重复径向渐变（repeating-radial-gradient）：

重复径向渐变是一个重复的径向渐变。

/* 语法 */
.repeating-radial-gradient {
  background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}
 
/* 示例 */
.repeating-radial-gradient {
  background: repeating-radial-gradient(circle, red, yellow 10%, green 15%);
}

以上就是CSS中定义的四种渐变类型，你可以根据你的需求选择合适的渐变类型。