mask-image + 内联 SVG 路径是最省事、最可控的波浪分割线方案，因其不占文档流、支持 repeat-x 铺满、动画平滑且兼容性优于 clip-path: path()；需确保路径起止对齐边界、底部闭合、fill 为白色，并正确 URL 编码 viewBox 与路径。
直接用 mask-image + 内联 SVG 路径是最省事、最可控的在线波浪分割线生成方式。它不占文档流、可重复铺满、动画平滑，且比 clip-path: path() 兼容性好得多。
为什么不用 clip-path: path() 直接写波浪？
Firefox 对 clip-path: path("M0,0 C...") 支持滞后，Safari 缩放时容易锯齿；手写路径字符串极易出错——空格/逗号多一个少一个、坐标带单位（如 100px）、漏掉 Z 闭合，都会导致裁剪失效或视觉错位。更麻烦的是，clip-path 不支持 repeat-x，宽度变化就得重算整条路径。
用 mask-image 则规避了这些：路径只需定义“一个周期”，靠 repeat-x 自动延展；浏览器只解析一次 SVG 数据，渲染更稳定。
mask-image 中 SVG 路径怎么写才不漏光？
关键就三点：起止点对齐容器左右边界、底部必须闭合到容器底边、fill 必须是白色（mask 白色显形，黑色隐藏）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
d="M0,9.6 C20,-2 40,-2 60,9.6 C80,21.4 100,21.4 120,9.6 V30 H0 Z"—— 这里V30是向下画到底部（假设容器高 30px），H0回左，Z闭合 - 必须设
viewBox="0 0 120 30"，让路径坐标与容器尺寸比例一致，否则缩放失真 - 内联 SVG 要 URL 编码：
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 30'%3E%3Cpath d='M0,9.6...' fill='white'/%3E%3C/svg%3E"); - 别忘了加
mask-repeat: repeat-x;，否则只显示一个波峰
在线工具生成后，为什么页面里波浪不显示？
常见原因不是路径错，而是 CSS 层叠或背景依赖没配对：
- 被遮盖：确保目标元素有
background-color或background-image，因为mask-image只作用于元素的可见内容，纯透明区域 mask 无效 - 高度塌陷：SVG 分割线常放在两个区块之间，但若父容器未清除浮动或未设
overflow: hidden，可能高度为 0 —— 加height: 30px; min-height: 30px;强制撑开 - 编码失败：复制在线工具生成的 data URL 后，检查是否含中文、换行或未转义字符（如
%20，要转成 <code>%3C） - 兼容性兜底缺失：Chrome 117+/Firefox 120+/Safari 16.4+ 原生支持，旧版可 fallback：
background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%); background-size: 20px 20px;
想让波浪动起来，但 animation 不生效？
mask-image 本身不能直接动画，得靠间接方式：
- 用
mask-position: 0 0;+animation: wave-move 8s linear infinite;，移动 mask 的起始位置实现“流动”效果 - 路径里别用绝对坐标（如
M0,0），改用相对命令（如m0,0 c20,-10 40,-10 60,0），方便后续用transform: translateX()驱动整条波浪 - 避免在
@keyframes里改mask-image值——浏览器不支持该属性动画，会直接跳变或静止 - 如果要用呼吸式起伏，改用
transform: scaleY()动画整个 SVG 容器，比重绘路径更轻量
真正难的不是画出波浪，而是让它的起点和终点严丝合缝地咬住上下区块的边缘——这要求你始终把 viewBox、容器 height、路径底部 Y 坐标三者当成一个联动系统来调，而不是孤立改某一项。
