mask-image 比 clip-path 更可控，因其支持渐变/SVG遮罩、透明度过渡及 mask-position/mask-size 驱动的无重排波浪动画；径向渐变可快速模拟波浪，SVG 则实现精准正弦波底边。
mask-image 做波浪底边为什么比 clip-path 更可控
因为 mask-image 能用渐变或 SVG 作为遮罩源，支持透明度过渡，而 clip-path 的 path() 或 inset() 难以实现平滑起伏的边缘动画；更重要的是，mask-image 可配合 mask-position 和 mask-size 实现位移+缩放驱动的波浪流动效果，且不触发重排。
用 radial-gradient 模拟简单波浪底边的关键参数
不用 SVG 也能快速出效果：用重复的径向渐变叠加出周期性起伏。核心是让渐变从透明过渡到不透明再回到透明，形成“峰-谷”节奏。
-
mask-image: radial-gradient(circle at 50% 100%, transparent 40%, black 41%);—— 单个圆心在底部中点，半径略超 40% 才能露出“波峰” - 叠加多个偏移的渐变：
mask-image: radial-gradient(circle at 20% 100%, transparent 40%, black 41%), radial-gradient(circle at 60% 100%, transparent 40%, black 41%), radial-gradient(circle at 100% 100%, transparent 40%, black 41%); - 必须设
mask-repeat: repeat-x;否则只显示一个波峰 -
mask-size: 80px 60px;控制波长和波高；mask-position: 0 100%;确保只遮底部区域
用 SVG 实现精准可控的正弦波底边
需要真实正弦曲线时，内联 SVG 是最稳妥的方式——避免外部请求、支持 CSS 变量注入、可直接用 transform 动画路径。
<div style=" mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='200'%3E%3Cmask id='wave' x='0' y='0' width='1000' height='200'%3E%3Crect width='1000' height='200' fill='white'/%3E%3Cpath d='M0,150 Q250,100 500,150 T1000,150 L1000,200 L0,200 Z' fill='black'/%3E%3C/mask%3E%3C/svg%3E\"); mask-size: cover; mask-position: bottom; "></div>
- 路径
d中的Q（二次贝塞尔）和T（平滑连接）比C更易控形，适合模拟柔和波浪 - SVG 宽高要远大于容器（如 1000×200），否则缩放后锯齿明显；
mask-size: cover保证填满 - 若要动画波浪，不要 animating
d属性（不支持 CSS 动画），改用mask-position: x 100%+transition水平滚动遮罩层
动画波浪时 mask-position 移动方向与视觉反直觉问题
往右移 mask-position，实际看到波浪往左“涌”，因为遮罩图在动，内容是静止的——这点极易搞反。
立即学习“前端免费学习笔记（深入）”；
- 想让波浪从左向右滚，需设置
mask-position: -100% 100%;→0 100%;（负值起始） - 用
@keyframes时注意：起点必须是mask-position: -200px 100%;这类具体像素值，百分比在不同mask-size下行为不一致 - 加
mask-composite: add;（默认值）确保多层遮罩叠加正常；若用exclude会意外挖空 - Firefox 对
mask-image的 SVG data URL 支持较弱，建议加-webkit-mask-image兜底
真正难的不是画出波浪，而是让波峰高度、频率、流动速度三者协调——稍一调快，就变成抖动；稍一拉宽，就失去起伏感。这些全靠 mask-size 和 mask-position 的数值组合反复试出来。
