mask-image + 内联svg路径是最可控、易复用的波浪分割线方案，支持贝塞尔曲线平滑波形、repeat-x铺满、mask-position动画流动，需注意viewbox、路径闭合、白色fill及background依赖等细节。
直接用 mask-image + 内联 SVG 路径是最可控、最易复用的波浪分割线方案，比 clip-path: polygon() 更平滑，比纯 SVG 嵌入更轻量。
为什么选 mask-image 而不是 clip-path
clip-path: polygon() 画出的波浪是折线拼接，边缘生硬，稍一缩放或响应式变化就露马脚；而 mask-image 可以用 SVG 的贝塞尔曲线定义真正平滑的波峰波谷，且 mask 本身不参与布局、不影响 z-index 层叠逻辑。更重要的是：mask-image 支持 repeat-x，一条小波浪路径就能铺满整行，适配任意宽度容器。
- 浏览器兼容性：Chrome 117+、Firefox 120+、Safari 16.4+ 均原生支持（Edge 同 Chrome）
- 不支持时可 fallback 到纯色 border 或 background-image
- SVG 路径必须用
url("data:image/svg+xml,...")编码，不能直接写<svg></svg>标签
mask-image 中 SVG 路径怎么写才靠谱
关键不是画多复杂，而是控制好 viewBox 和路径起止点——波浪必须“从左穿入、向右穿出”，且底部要闭合到容器底边，否则会出现漏光或错位。
- 推荐 viewBox="0 0 120 30"：宽高比约 4:1，适合横向重复
- 路径 d 属性建议用
M0 9.6c20-7 40-7 60 4.8 20 11.8 40 11.8 60 0V30H0z这类三次贝塞尔组合，避免手写大量坐标 - 路径
fill必须设为白色（#fff），因为 mask 中白色 = 完全显示，黑色 = 完全隐藏 - 不要在 SVG 中设 width/height，由 CSS 的
mask-size控制缩放
mask-image 动态波浪怎么加动画
动画本质是移动 mask 图像的位置，靠 mask-position 的 x 偏移实现“流动感”。注意：必须同时设置 mask-repeat: repeat-x，否则动画会卡在单个波浪单元里不动。
- 基础动画：用
@keyframes wave-flow { 0% { mask-position: 0 bottom; } 100% { mask-position: -120px bottom; } } - 要让波浪“持续滚动”，
animation-duration值应与mask-size宽度一致（如mask-size: 120px 30px→ duration 设为1.5s） - 叠加第二层波浪增强层次感？用
::after伪元素，mask-position错开一半（如60px bottom），再调低opacity - Safari 旧版本需加
-webkit-mask-position前缀
常见漏掉的坑和调试技巧
最常卡住的地方不是写错路径，而是 mask 的“可见性逻辑”被忽略：mask 是作用在元素自身背景上的遮罩，不是覆盖在内容上方的图层。
- 如果波浪没显示，先检查元素是否有
background（mask 只对背景生效，对子元素透明） - 如果波浪边缘有锯齿，把
shape-rendering设为geometricPrecision或加transform: translateZ(0)触发硬件加速 - 移动端 Safari 有时会忽略
mask-position动画，改用transform: translateX()配合一个透明伪元素做视觉替代 - 在线生成路径？用 Wave Generator 导出 SVG，再 URL encode —— 不要手动替换空格和引号
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
