text-decoration-style: wavy 在 Chrome 60+、Firefox 70+、Safari 12.1+ 和 Edge 79+ 支持，但 Safari 12.1–15.6 存在波浪线偏高、锯齿、换行断裂等渲染 bug；仅设该属性不生效，需配合 text-decoration: underline 使用，且易被继承或优先级覆盖；iOS Safari 对 input/contenteditable 支持差，推荐用 SVG background-image 降级，并通过 @supports 检测 Safari 环境切换方案。
text-decoration-style: wavy 在哪些浏览器能用
Chrome 60+、Firefox 70+、Safari 12.1+ 和 Edge 79+ 支持 text-decoration-style: wavy，但 Safari 12.1–15.6 存在严重渲染 bug：波浪线位置偏高、锯齿明显、换行后断裂。实际项目中若需兼容 Safari，不能只靠这个属性。
为什么直接写 wavy 常常没效果
常见失效原因不是语法错，而是被其他装饰属性覆盖或未激活基础下划线：
-
text-decoration必须显式包含underline，仅设text-decoration-style: wavy不生效 - 父元素设置了
text-decoration: none且未重置，会继承覆盖 - 使用了
text-decoration-line: overline或line-through，wavy只对underline生效 - CSS 优先级不足，被更具体的规则（如 class 或 inline style）压过
用 background-image 模拟波浪线的实操要点
当原生 wavy 不可靠时，用 SVG 背景图是目前最稳的降级方案：
span.wavy {
text-decoration: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 Q25,5 50,10 T100,10' stroke='%23007bff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: bottom 2px;
background-size: 20px 10px;
padding-bottom: 4px;
}
关键细节：
- SVG 中
Q是二次贝塞尔曲线，控制波峰平滑度；T实现镜像续画，保证无缝拼接 -
background-position: bottom 2px微调垂直对齐，避免贴底遮挡字母 descender（如 g、y） -
padding-bottom预留空间，防止波浪线被截断 - URL 编码必须严格，单引号、空格、斜杠都要转义，否则背景不加载
移动端 iOS Safari 的特殊处理
iOS 15.4 之前，text-decoration-style: wavy 在 或 contenteditable 区域完全不渲染；iOS 16+ 虽支持，但波浪线粗细不可控，且与字体大小缩放不同步。
稳妥做法是检测环境并切换方案：
/* 仅对非 Safari 使用原生 wavy */
@supports (text-decoration-style: wavy) and (not (-webkit-appearance: none)) {
.wavy { text-decoration: underline wavy #007bff; }
}
/* Safari / iOS 兜底用 background-image */
@supports (-webkit-appearance: none) {
.wavy { /* 上面的 background-image 规则 */ }
}
注意：@supports 里的 -webkit-appearance: none 是 Safari 特征检测常用 proxy，比 UA 判断更可靠。真正的难点不在画波浪，而在让波浪始终贴合文字基线——这需要反复测不同字号、字体下的 background-position 偏移值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
