css制作波浪线

使用线性渐变（linear-gradient）创建波浪线

通过CSS的linear-gradient可以模拟波浪线效果。设置背景为重复的线性渐变图案，调整角度和色标位置形成波浪形状。

.wave-line {
  height: 2px;
  background: linear-gradient(90deg, transparent 25%, #000 50%, transparent 75%);
  background-size: 10px 100%;
}

调整background-size的第一个值可改变波浪密度，修改色标百分比可调整波浪幅度。

使用SVG内联背景

直接嵌入SVG路径作为背景图像，能实现更精确的波浪控制。这种方法支持自定义波浪曲线和动画效果。

.wave-svg {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1 Q5 3 10 1 T20 1' stroke='%23000' fill='none'/%3E%3C/svg%3E");
  height: 2px;
  background-size: 20px 100%;
}

通过修改SVG中的path的d属性可改变波浪形状，viewBox定义单个波浪的尺寸。

伪元素结合边框半径

利用::before或::after伪元素配合border-radius创建波浪线段。这种方法适合需要独立控制每个波浪的场景。

.wave-pseudo {
  position: relative;
  height: 20px;
  overflow: hidden;
}
.wave-pseudo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 200%;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #000;
  animation: wave 3s linear infinite;
}
@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

调整border-radius和box-shadow的数值可改变波浪外观，动画属性控制运动效果。

使用clip-path绘制路径

CSS的clip-path属性配合多边形或SVG路径可以裁剪出波浪形状。这种方法适合需要复杂波浪轮廓的情况。

.wave-clip {
  height: 30px;
  background-color: #000;
  clip-path: path('M0,10 C15,25 25,0 40,10 S65,25 80,10');
}

修改路径中的贝塞尔曲线控制点（如C15,25部分）可精确调整波浪曲率和周期。