text-decoration-style: wavy 不适合做装饰波浪线，因其兼容性差（Firefox不支持）、样式不可控、位置固定、不支持hover动画；推荐用SVG inline background或flex模拟波浪线。
text-decoration-style: wavy 确实是 CSS 原生支持的波浪线选项，但它几乎无法用于实际装饰目的——浏览器兼容性差、样式不可控、位置固定且不响应 hover 或动画。
为什么 text-decoration-style: wavy 不适合做装饰波浪线
这个属性本意是为下划线提供语义化波浪（如拼写错误提示），不是为 UI 装饰设计的：
- 仅 Chrome/Edge 105+ 和 Safari 16.4+ 支持，Firefox 完全不支持（截至 2026 年 4 月仍为
not supported） -
text-decoration-color和text-decoration-thickness在部分浏览器中对wavy无效或渲染异常 - 波浪振幅、频率、偏移完全不可调，只能靠字体大小间接影响，但效果极不稳定
- 无法独立定位（比如想让波浪线在文字下方 8px 处？做不到）
- 不能配合
:hover触发动画，也不能用background-image替换
真正可用的波浪线实现方式：SVG inline background
这是目前最稳定、可控、无 JS 依赖的方案，直接嵌入 CSS，兼容 IE11+：
- 用
data:image/svg+xml编码一条 SVG 波浪路径，作为background-image - 关键参数可调：
stroke控颜色，viewBox和d属性控波长与振幅 - 配合
background-size和background-position精确定位 - 用
@keyframes+background-position实现平滑滚动动画
a {
text-decoration: none;
color: #333;
padding-bottom: 6px;
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 24px 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,6 Q6,2 12,6 T24,6' fill='none' stroke='%23007bff' stroke-width='2'/%3E%3C/svg%3E");
}
a:hover {
animation: wave-anim 2s infinite linear;
}
@keyframes wave-anim {
from { background-position-x: 0; }
to { background-position-x: -24px; }
}用多个 <div> 模拟波浪线（适合需要高度自定义的场景）
当 SVG 编码太重或需动态控制振幅/相位时，可用 flex + staggered animation：
立即学习“前端免费学习笔记（深入）”；
- 12 个等宽
<div class="wave-bar">水平排列，display: flex+align-items: flex-end - 每个 bar 高度通过
animation在4px～16px间变化 - 用
animation-delay: calc(-0.08s * var(--i))（配合:nth-child或 CSS 自定义属性）错开周期 - 避免用 SASS 生成：现代浏览器支持
calc()和 CSS 变量，纯 CSS 即可实现 stagger
容易被忽略的关键点
所有方案都要注意三点：
- SVG 中的
%必须 URL 编码为%25，否则整个url()失效（常见坑） - 使用
background-position: 0 100%而非bottom，后者在某些缩放比例下会偏移 - 若波浪线需适配深色模式，别只改
stroke，记得同步更新background-color或用color-scheme: light dark隔离
