不能直接用 text-decoration: underline wavy 给 label 加波浪线，因 firefox 完全不支持、safari 15.4+ 才部分支持，且存在下划线贴字、flex 容器中位置偏移等问题；推荐用 background-image 配合 radial-gradient 模拟波浪线，兼容 ie11+，需设 display: inline-block、padding-bottom 和 background-origin: content-box。
label 标签本身不带下划线，也不能直接靠语义加波浪线；要加，必须用 CSS 控制，且不能依赖 text-decoration: underline wavy——它在 Firefox 里至今不支持，Safari 也只从 15.4+ 开始部分支持，不是稳定选项。
为什么不能直接用 text-decoration: underline wavy 给 label
看似写一行就完事，但实际会遇到三类问题：
- Firefox 完全忽略
wavy值，降级为实线下划线（甚至不显示） - Safari 对
text-underline-offset支持滞后，波浪线容易贴着字母 descender（比如 g、y）穿过去 -
label常和input配合使用，若父容器有display: flex或vertical-align，text-decoration渲染位置会偏移，且无法用background-origin精准修正
推荐方案：用 background-image 模拟波浪线（兼容 IE11+）
核心是把波浪线当背景图铺在文字下方，不依赖浏览器对 text-decoration 的实现差异。适用于 label 这类短文本、需高保真显示的场景：
- 必须设
display: inline-block或inline-flex，否则background-position: bottom无效 - 用
padding-bottom留出波浪显示空间，值建议从4px起调（字体越大，值越大） - 用
radial-gradient组合生成波浪，比 SVG 更轻量、无额外请求 - 必须加
background-origin: content-box，否则波浪可能从 padding 区开始画，错位
示例代码：
label.wavy {
text-decoration: none;
display: inline-block;
background-image: radial-gradient(circle at 50% 120%, #3b82f6 2px, transparent 2px),
radial-gradient(circle at 50% -20%, #3b82f6 2px, transparent 2px);
background-size: 12px 24px;
background-repeat: repeat-x;
background-position: left bottom;
background-origin: content-box;
padding-bottom: 4px;
}
如果只要普通下划线，别碰 <u></u> 标签
<u></u> 在 HTML5 中已不是“加下划线”的工具，而是语义标签（如拼写错误、专有名词）。给 label 套 <u></u> 会导致：
- 屏幕阅读器读作 “underline”，干扰辅助功能
- 某些 CMS 或 SSR 框架会自动过滤或重写
<u></u>，样式丢失 - 无法统一控制颜色、偏移、hover 效果，维护成本高
正确做法是走纯 CSS：label.underline { text-decoration: underline; text-decoration-color: #6b7280; text-underline-offset: 2px; }。注意 text-underline-offset 在旧版 Android WebView 里不生效，可加 padding-bottom: 1px 作为视觉 fallback。
真正难的是 label 和 input 对齐时，下划线垂直位置要和 input 边框一致——这时候别调 vertical-align，改用 flex 容器 + align-items: baseline，再统一设 line-height 和 text-underline-offset。否则波浪线一动，整个表单视觉节奏就乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
