radial-gradient不适合绘制真正可用的波浪线边框——因其本质是圆形/椭圆渐变，靠多层拼接模拟波浪易断点错位、缩放失真、无法周期性对齐，且兼容性差、性能低；推荐mask-image或background-image配合SVG贝塞尔路径实现可控、可动画、自适应的波浪线。
radial-gradient 不适合绘制真正可用的波浪线边框——它画不出连续、对齐、可缩放的波浪，强行用只会掉进断点、错位、锯齿、动画抖动的坑里。
为什么 radial-gradient 平铺出不来连贯波浪
本质是圆形/椭圆渐变，靠多个圆心拼“切线感”纯属视觉巧合。只要 background-size 稍有变化，或容器宽度不是波长整数倍，接缝立刻露白或重叠；background-position: 100% 在不同字体基线下根本贴不到底边；旧版 Safari 对多层 radial-gradient 的解析还常偏移 1–2px。
常见错误现象：
-
background: radial-gradient(circle at 0 50%, transparent 4px, #007bff 4px, #007bff 8px, transparent 8px)横向 repeat 后是虚线点阵，不是平滑起伏 - 两层
::before+::after叠加时，animation-delay稍差 0.05s，波峰就错开，看起来像卡顿 - 设
background-size: 24px 12px，但圆心横坐标用了10px而非0或24px，重复边界直接断裂
如果非要硬上 radial-gradient，至少守住这三条线
仅限装饰性小图标、静态窄区域（如按钮底部 2px 高波纹），且不需响应式缩放。
立即学习“前端免费学习笔记（深入）”；
- 只用单层
radial-gradient，禁用多层叠加；用background-repeat: repeat-x+ 精确background-size控制周期 - 圆心横坐标必须是
background-size宽度的整数倍，例如background-size: 20px 10px→ 圆心只能设0、20px、40px…不能写12px - 底边对齐别信
100%，改用background-position: 0 calc(100% + 4px)，4px 是手动测出的字体基线补偿值
真正能落地的替代方案只有两个
要支持动画、适配文字高度、随容器宽度自动延展，必须换技术栈：
-
mask-image+ SVG data URL：用<path d="M0,6 Q6,2 12,6 T24,6">定义贝塞尔波形，mask-repeat: repeat-x横向铺满，@keyframes动mask-position就是流动水波 -
background-image+ SVG data URL：把同一条路径嵌入url("data:image/svg+xml,...")，用background-size和background-position精控起始位置和波长，兼容性比mask-image更广（IE11+ 可跑）
这两个方案没有“拼圆心”的脆弱性，波峰波谷是几何路径而非像素凑数，缩放、动画、文字对齐全天然成立——而 radial-gradient 方案里每一个看似微小的参数，都在为下一次线上 bug 埋雷。
