text-decoration-style 必须与 text-decoration-line 配合使用才生效，单独设置无效；推荐用简写 text-decoration: underline wavy；wavy 和 double 易误用，需注意字体降部兼容性及字号限制。
text-decoration-style 必须和 text-decoration-line 一起用
单独写 text-decoration-style: wavy 不会生效。这个属性本身不控制“要不要画线”，只控制“画出来的线长什么样”。浏览器看到只有样式没线路，就当没这回事。
常见错误现象：写了 text-decoration-style: dotted 但下划线还是实线；检查 computed styles 发现 text-decoration-line 是 none 或未设置。
- 正确写法必须包含线路声明，比如：
text-decoration-line: underline+text-decoration-style: wavy - 推荐用简写
text-decoration: underline wavy（顺序无关，但 line 在前更易读） - 如果同时设颜色和粗细，完整简写是：
text-decoration: underline wavy #ff6b6b 2px
支持的值里 wavy 和 double 最容易被误用
wavy 看起来像手写波浪，但实际渲染依赖字体基线和浏览器实现。Chrome 和 Firefox 对 y、g、j 这类降部字符的波浪对齐不一致，Safari 有时直接退化为实线。
double 并不是“加粗的实线”，而是两条平行线，间距由字体决定——你没法手动调间隔。在小字号（如 12px）下，两条线常糊成一块，视觉上反而像加粗单线。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 测试时务必在真实设备上查降部字符（如 “gyp”）的波浪是否连续
-
double建议只用于 16px 及以上字号，否则辨识度差 -
dotted和dashed在高 DPR 屏幕（如 Retina）上点/段可能模糊，优先考虑wavy或solid
JS 动态设置要用 style.textDecorationStyle，但得先确保 line 存在
通过 JS 改样式时，element.style.textDecorationStyle = 'wavy' 本身合法，但如果元素当前没启用任何装饰线（即 text-decoration-line 是 none），这个赋值就无效。
常见错误现象：脚本执行后没变化；用 getComputedStyle 查发现 textDecorationStyle 是空字符串。
- 安全做法是连带设置线路：
element.style.textDecoration = 'underline wavy' - 若需保留原有 color/thickness，先读取再拼接：
const cur = getComputedStyle(element).textDecoration; element.style.textDecoration = cur.replace(/solid|wavy|dotted|dashed|double/g, 'wavy'); - 注意：Firefox 旧版本（style.textDecorationStyle 会返回 undefined
兼容性陷阱：Safari 15.4 之前完全不识别这个属性
哪怕写了 text-decoration: underline wavy，Safari 15.3 及更早版本也会直接忽略 wavy，回退到默认 solid。这不是 bug，是标准支持缺失。
没有优雅降级方案——CSS 不提供“如果 wavy 不支持就用 dotted”的条件语法。你只能接受它在旧 Safari 里就是实线。
- 如果设计强依赖波浪效果（比如法律文档强调修改痕迹），需额外用 SVG 或 canvas 模拟，不能只靠 CSS
- 构建工具中可加 PostCSS 插件自动补
text-decoration: underline回退，但仅限视觉降级，无法新增样式 - 目前（2026 年 5 月）iOS 15.4+、macOS Monterey+ 已覆盖绝大多数用户，但企业内网仍可能遇到旧系统
text-decoration-style 的行为和字体强耦合，同一段 CSS 在不同 font-family 下，wavy 的振幅、double 的间距都可能突变——这点连 DevTools 的 computed 面板都未必如实反映。 
