BACKGROUND & DECOR
波浪分隔Wave Divider
两个色块之间用一道 SVG 波浪衔接，比直线分隔柔美得多。
效果预览
上方区块（白色）
下方区块（渐变）· 波浪形上边缘
适合用在哪
儿童/教育/水相关品牌、页脚过渡、插画站。
容易踩的坑
- SVG fill 与下个区块背景色差 1 个色值，就会出现一条细缝或色差线。
- 波形在 375px 宽下被 preserveAspectRatio=none 压扁，变成接近直线的锯齿。
- 波浪漂移动画在长页面多处同时运行，会持续消耗 CPU 且分散注意力。
设计提示词 · Prompt
波浪分隔（Wave Divider）：区块底部放一个 SVG path 波形（width 100%、height 60-120px、preserveAspectRatio="none"），fill 用下个区块的背景色——视觉上是"下个区块的波浪形上边缘"。波形要缓（1.5-2 个周期），频率太高像锯齿。双层波浪（前后两层错相位 + 不同透明度）有纵深感，可加缓慢水平漂移动画。生成工具：getwaves.io、svgwave.in。适合柔和品牌；科技感品牌用斜切或直线更合适。
Wave Divider: Place an SVG path waveform at the bottom of a section (width 100%, height 60-120px, preserveAspectRatio="none"), with fill set to the next section's background color — visually it becomes "the wavy top edge of the next section." Keep the wave gentle (1.5-2 cycles); too high a frequency looks like a sawtooth. Double waves (two layers, phase-offset with different opacities) add depth and can drift slowly horizontally. Generators: getwaves.io, svgwave.in. Suits soft brands; tech brands are better served by diagonal cuts or straight lines.
常见搭配
同一页面里经常和「波浪分隔」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-wavebg">
<div class="d-wavebg__top">上方区块（白色）</div>
<div class="d-wavebg__bottom">
<svg viewBox="0 0 400 25" preserveAspectRatio="none"><path d="M0,25 C80,0 160,25 240,10 C300,0 360,18 400,8 L400,25 Z" fill="#fff"/></svg>
<span class="d-wavebg__cap">下方区块（渐变）· 波浪形上边缘</span>
</div>
</div>