css 实现背景波浪形渐变色

以下是实现CSS背景波浪形渐变色的方法：

1. 使用CSS3的:before伪元素来创建波浪线形状，并设置background-repeat为repeat-x。

.wave {
  position: relative;
  background: linear-gradient(to right, #ffffff 10%, #0000ff 10%, #0000ff 20%, #ffffff 20%);
  height: 50px;
}

.wave:before {
  content: "";  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to right, #ffffff 10%, #0000ff 10%, #0000ff 20%, #ffffff 20%);
  background-size: 20px 20px;
  z-index: -1;
}

2. 通过设置背景的宽度和渐变色的百分比来控制波浪线的宽度。

.wave {
  position: relative;
  background: linear-gradient(to right, #ffffff 10%, #0000ff 10%, #0000ff 20%, #ffffff 20%);
  height: 50px;
  width: 100%;
}

.wave:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to right, #ffffff 10%, #0000ff 10%, #0000ff 20%, #ffffff 20%);
  background-size: 20px 20px;
  z-index: -1;
}