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部分）可精确调整波浪曲率和周期。
