text-decoration-style: wavy 需配合 text-decoration-line: underline 才生效，否则无效；兼容性差时应采用伪元素+渐变或 svg 背景方案。
直接用 text-decoration-style: wavy 最省事，但 Safari 12.1–15.6 渲染有偏高、锯齿、换行断裂等问题，生产环境不能只靠它；真要稳定可控，得用伪元素 + 渐变或 SVG 背景。
为什么 text-decoration-style: wavy 经常不生效
不是写错语法，而是基础条件没满足：
-
text-decoration必须显式包含underline，只设text-decoration-style: wavy没用 - 父级若设了
text-decoration: none，会继承覆盖，子元素需重置 -
text-decoration-line: overline或line-through时，wavy不起作用 - CSS 优先级被更具体的选择器（比如
.link:hover）压过，波浪线被隐藏
用 ::after + 线性渐变模拟波浪线（兼容性好、易调色）
核心是两个 45° 和 135° 的 linear-gradient 叠加，横向平铺形成“折角连续感”，视觉上逼近波浪。适合单行强调场景，比如标题、按钮文字。
关键点：
- 两个渐变方向必须互补（
45deg和135deg），否则拼接处断裂 -
background-size控制波长，比如0.5em 0.5em；值越小，波峰越密 -
background-repeat: repeat-x必须设两次（每个渐变层各一次），用逗号分隔 - 伪元素需设
position: absolute+bottom偏移，避免影响行高
示例代码片段：
.wavy { position: relative; }
.wavy::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 0.2em;
background: linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
background-size: 0.5em 0.5em;
background-repeat: repeat-x, repeat-x;
}
用 ::after + 径向渐变画更圆润的波浪（适合小字号或设计敏感场景）
径向渐变能更好模拟真实手绘波浪的弧度，但参数更难调：每个“波峰”由两个错位的半圆构成，靠 background-position 对齐。适合对线条平滑度要求高的项目，比如品牌页标题。
注意点：
-
radial-gradient(circle at Xpx Ypx, ...)中的at坐标决定圆心位置，上下两个渐变的 Y 值需一正一负（如-7px和27px）才能形成起伏 -
background-size要略大于单个波宽（比如设20px 20px），否则衔接生硬 - 在低 DPI 屏幕（如普通 Windows 笔记本）上，边缘可能轻微锯齿，需配合
backface-visibility: hidden或transform: translateZ(0)强制硬件加速
真正麻烦的不是怎么画出来，而是波浪线在响应式断行、字体缩放、不同 font-size 下是否还能对齐文字底部——伪元素方案必须手动微调 bottom 和 height，而 SVG 背景图能自动适配，只是少了动态换色能力。选哪种，得看你更怕维护成本，还是更怕兼容性翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
