radial-gradient 不适合做波浪线边框——因其本质是圆形渐变，多层拼接易断点错位、缩放失真、无法周期性对齐，且兼容性差、性能低；推荐 mask-image 或 background-image 配合 svg 贝塞尔路径实现可控、可动画、自适应的波浪线。
radial-gradient 做波浪线边框效果，不推荐——它画不出连续、可控的波浪，容易出现断点、错位或锯齿，且无法对齐文字或容器边界。
radial-gradient 为什么不适合画波浪线
radial-gradient 本质是圆形/椭圆渐变，靠多层叠加模拟波浪时，必须手动拼接多个圆心、半径和色标位置。稍有参数偏差，就会在重复边界处露出直角或空隙；background-size 稍一缩放，波峰波谷就错位；更麻烦的是，它无法像 linear-gradient 或 SVG 那样定义明确的周期性路径，导致“波浪”只是视觉巧合，不是几何结构。
- 常见错误现象：
background: radial-gradient(circle at 0 50%, transparent 4px, #007bff 4px, #007bff 8px, transparent 8px)看似能出波点，但横向 repeat 后是“虚线感”，不是连贯波浪 - 兼容性陷阱：旧版 Safari 对多层
radial-gradient的background-position解析不稳定，波形会抖动或偏移 - 性能隐患：每加一层 radial-gradient 就多一次绘制计算，4 层以上在低端设备上易掉帧
真正可用的波浪线边框替代方案
要用纯 CSS 实现可复用、可动画、可对齐的波浪线边框，应优先选以下两种：
-
mask-image+ SVG data URL：用贝塞尔曲线定义平滑波形，mask-repeat: repeat-x横向铺满，mask-size控制波长，支持@keyframes动画mask-position实现流动效果 -
background-image+ SVG data URL：把波浪路径写成<path d="M0,6 Q6,2 12,6 T24,6"></path>，嵌入url("data:image/svg+xml,...")，再用background-size和background-position精确定位到底部
二者都比 radial-gradient 更轻量、更可控，且 IE11+（SVG 方案）或 Chrome 80+/Firefox 70+/Safari 15.4+（mask 方案）均能稳定渲染。
如果非要试 radial-gradient，至少避开这些坑
真要硬上 radial-gradient 模拟波浪（比如只做装饰性小图标），请严格遵循：
- 只用单层
radial-gradient，配合background-repeat: repeat-x和精确的background-size: 20px 10px，避免嵌套多层 - 波峰位置必须落在
background-size宽度的整数倍上，例如设background-size: 24px 12px，则圆心横坐标只能是0、24px、48px……否则接缝错位 - 永远用
calc(100% + Xpx)定位（如background-position: 0 calc(100% + 4px)），别信100%能自动贴底——字体基线会让它浮动
波浪线边框真正的难点从来不是“怎么画”，而是“怎么让它稳稳贴在该在的位置，并随字号、行高、缩放自适应”。radial-gradient 在这个环节几乎必然失败，别把它当第一选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
