text-decoration: underline wavy 不可靠，推荐用 background-image（svg 或渐变）模拟波浪下划线：兼容性好、可调颜色/振幅/间距，需配合 background-repeat: repeat-x、background-origin: content-box 和 padding-bottom 确保精准贴底显示。
波浪线下划线用 text-decoration 实现不了
直接写 text-decoration: underline wavy 看似合理，但实际只在部分浏览器生效（Chrome 从 119+ 开始支持，Firefox 仍不支持 wavy），且无法控制波浪频率、颜色或偏移。这不是一个可交付的方案。
用 background-image 模拟波浪线最稳妥
核心思路是把下划线换成一条 SVG 或 CSS 渐变生成的波浪图案，作为背景铺在文字下方。这样兼容性好（IE11+ 都支持），还能自由调颜色、振幅和间距。
- 用
linear-gradient+radial-gradient组合生成重复波浪纹（轻量、无需额外请求） - 设置
background-size控制波长，background-position微调垂直对齐 - 必须搭配
background-repeat: repeat-x和background-origin: content-box，否则波浪会错位或截断 - 给
a标签加display: inline-block或padding-bottom留出波浪显示空间，不然会被文字裁掉
/* 示例：深蓝波浪线 */
a.wavy {
text-decoration: none;
background-image:
radial-gradient(circle at 50% 120%, #2563eb 2px, transparent 2px),
radial-gradient(circle at 50% -20%, #2563eb 2px, transparent 2px);
background-size: 12px 24px;
background-repeat: repeat-x;
background-position: left bottom;
background-origin: content-box;
padding-bottom: 4px;
}
用 SVG <svg></svg> 嵌入更可控但略重
如果需要高保真波浪（比如正弦曲线、不同振幅），内联 SVG 是唯一可靠方式。它不依赖 CSS 渐变能力，渲染精准，但 HTML 会变长。
- SVG 必须设
width和height，并用viewBox保证缩放不失真 - 用
<path d="M0,10 C5,5 15,5 20,10"></path>手绘半周期贝塞尔曲线，再用repeat拼接 - 把 SVG 当作
background-image: url("data:image/svg+xml,...")使用，避免外链请求 - 注意 URL 编码：括号、逗号、空格都要转义，否则样式失效
伪元素 ::after 方案容易漏掉的关键点
有人用 ::after 绝对定位画波浪，这可行，但极易出问题：
-
a必须设position: relative，否则::after相对于父容器定位 -
content: ""不可省略，否则伪元素不渲染 - 波浪高度靠
height+background或border-bottom模拟，但真实波浪需 SVG 或渐变 - 响应式场景下，
width若写死像素值，换行时波浪会断开；应改用width: 100%并配合white-space: nowrap折衷
真正难的不是画出波浪，而是让它贴着文字底部、不随字体大小突变、不被 overflow hidden 截断——这些细节没处理好，上线后第一眼就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
