能，但需配合text-decoration-line和color使用，且仅现代浏览器支持；波浪线不可动画，须用background+animation模拟，并注意对齐文字底部。
text-decoration-style: wavy 能直接用吗？
能，但只在部分场景下“开箱即用”。text-decoration-style: wavy 是 CSS Text Decoration Level 3 标准里的合法值，配合 text-decoration-line: underline 就能画出静态波浪线。但它不是万能的——现代浏览器（Chrome 90+、Firefox 85+、Safari 15.4+）才稳定支持，旧版 Safari 和 IE 完全不识别。
更关键的是：text-decoration 是一个复合属性，单独设 style 不生效，必须同时指定 line（比如 underline）和 color（否则颜色继承文字色，可能看不清）。
- ✅ 正确写法：
text-decoration: underline wavy #ff6b6b - ❌ 错误写法：
text-decoration-style: wavy单独出现，或漏掉underline - ⚠️ 注意：WebKit 内核需加
-webkit-text-decoration前缀保底，但仅限 Safari 15.3 及更早版本；新版已不需要
为什么 hover 时波浪线没动？
text-decoration 本身不支持动画——text-decoration-color 和 text-decoration-style 都是**不可动画属性**（non-animatable），CSS 动画无法驱动波浪线位移或流动。你看到的“动态波浪”，实际是靠 background + animation 模拟出来的视觉效果。
常见错误是试图这样写：
@keyframes wave {
from { text-decoration-style: wavy; }
to { text-decoration-style: wavy; }
}
这不会产生任何动画，浏览器会静默忽略。
- ✔️ 可动画的替代方案：用
background-image（SVG 或渐变） +background-position-x动画 - ✔️ SVG 波形推荐用 data URL 编码，避免额外请求，如：
url("data:image/svg+xml,%3Csvg...%3E") - ⚠️ 径向渐变方案（
radial-gradient）虽能复现波浪，但 background-size 和 position 计算稍复杂，容易错位导致断点
用 background 实现波浪线时，怎么对齐文字底部？
核心难点不是画波浪，而是让波浪“贴着文字下边缘走”，尤其在不同字号、行高、字体下容易偏移。直接写 background-position: 0 100% 看似合理，但实际受 line-height 和基线影响，常出现上浮或下沉。
- ✅ 推荐定位方式：
background-position: 0 calc(100% + 2px)（+2px 是经验值，根据字体微调） - ✅ 更稳妥做法：用
em单位，例如calc(1em + 0.1em)，随字号缩放 - ⚠️ 避免用固定像素值（如
10px）硬编码，否则响应式布局下会错位 - ⚠️ 如果文字有
text-shadow，波浪线也要同步考虑阴影厚度，否则视觉脱节
要不要用 mask-image 做波浪文字？
别混淆概念：mask-image 是用来做“波浪形文字镂空”或“水波拂过文字表面”的动态遮罩效果，不是下划线。它需要 color: transparent + background-clip: text + SVG 遮罩路径，整套逻辑和下划线完全无关。
如果你要的是“文字底下那条会流动的波浪线”，mask-image 是绕远路，还带来兼容性风险（Firefox 直到 2025 年中才支持 mask-position 动画）。
- ✅ 真正该用
mask-image的场景：文字本身呈现起伏波纹质感（比如“海浪”两个字像被水波扭曲） - ❌ 不该用的场景：只想给链接加个 hover 波浪下划线——这时候 background 方案更轻量、可控、兼容
- ⚠️ 最容易被忽略的一点：所有基于
background的方案，都要求元素是display: inline或inline-block，块级元素需显式设置display否则背景铺不满
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
