text-decoration-style: wavy 必须与 text-decoration-line: underline（或简写 text-decoration: underline）配合使用才生效，单独声明无效；safari 12.1–15.6 存在偏移、锯齿、换行断裂等渲染缺陷，推荐用 @supports 检测 + 伪元素或 svg background-image 降级。
text-decoration-style: wavy 必须搭配 underline 才生效
只写 text-decoration-style: wavy 不会显示波浪线，浏览器直接忽略。它不是独立属性，而是 text-decoration-line 的修饰项。必须显式声明下划线行为：
-
text-decoration-line: underline（或简写为text-decoration: underline） - 再加
text-decoration-style: wavy - 可选配
text-decoration-color和text-decoration-thickness控制颜色与粗细
错误写法示例：.wavy { text-decoration-style: wavy; } —— 什么都不会出现。
Safari 12.1–15.6 渲染 bug 会导致波浪线偏高、锯齿、换行断裂
虽然 text-decoration-style: wavy 在 Chrome 60+、Firefox 70+、Edge 79+ 表现稳定，但 Safari 12.1 到 15.6（含 iOS 15.x）存在已知缺陷：
- 波浪线 y 偏移量异常，常高出预期位置 2–4px
- 贝塞尔曲线渲染失真，边缘锯齿明显
- 文字换行时，波浪线在断点处不连续，甚至消失
- 在
input或contenteditable元素中基本不可用
这意味着：如果你的用户有相当比例使用旧版 Safari（尤其是企业内网或教育场景），不能只依赖原生方案。
@supports 检测 + 伪元素降级是生产环境推荐做法
不要用 UA 判断，用 CSS 原生能力检测更可靠。先尝试原生 wavy，失败则 fallback 到 ::after + linear-gradient：
.wavy {
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #007bff;
}
@supports not (text-decoration-style: wavy) or (-webkit-appearance: none) {
.wavy {
text-decoration: none;
position: relative;
}
.wavy::after {
content: '';
position: absolute;
left: 0; bottom: 0.1em;
width: 100%; height: 2px;
background: linear-gradient(90deg, transparent 50%, #007bff 50%);
background-size: 4px 4px;
background-position: 0 100%;
}
}
注意：@supports not (text-decoration-style: wavy) 覆盖所有不支持的浏览器；or (-webkit-appearance: none) 是 Safari 的 hack 触发条件（因 Safari 15.6 虽支持语法但渲染失效，需强制降级）。
用 SVG background-image 实现像素级可控的波浪线
当渐变模拟仍不够精准（比如需要更密/更缓的波峰），SVG 是目前最稳的方案：
- 把 SVG 写成 data URL，避免额外请求
- 关键参数：控制振幅（
ry）、波长（rx）、位移（y） - 务必设
background-repeat: repeat-x和精确的background-position
示例（1px 高、4px 波长的平滑波浪）：
.wavy-svg {
text-decoration: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 2'%3E%3Cpath d='M0,1 Q1,0 2,1 T4,1' stroke='%23007bff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: 0 1.05em;
background-size: 4px 2px;
}
这个 SVG 路径生成的是贝塞尔曲线波浪，比 CSS 渐变更抗锯齿，且换行不断裂——但代价是维护成本略高，每次调参都要重编码。
真正难的不是写出波浪线，而是在 Safari 渲染 bug、input 元素限制、换行断裂、颜色动画不支持这些边界条件下，让效果既一致又轻量。多数项目卡点不在“怎么写”，而在“什么时候该放弃原生、切到降级路径”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
