text-decoration属性需用完整语法或分写子属性来精确控制下划线；常见值包括underline、line-through、overline、none；推荐使用text-decoration-line、color、style、thickness分别设置以提升可控性与兼容性。
text-decoration 属性的基本写法和常见值
HTML5 中给文字加下划线，核心是用 CSS 的 text-decoration 属性，不是 HTML 标签（比如已废弃的 ）。它控制的是文本的装饰线类型、颜色、样式和位置。
最常用组合是加下划线：
text-decoration: underline;但单独写这个只启用默认样式（实线、黑色、基线位置），实际项目中往往需要更精确控制。
-
underline：下划线（最常用） -
line-through：删除线 -
overline：上划线（极少用） -
none：清除所有装饰（常用于去掉a标签默认下划线）
为什么不能只写 text-decoration: underline？
因为 text-decoration 是简写属性，单写 underline 会重置其他子属性为浏览器默认值，导致不可控。例如：
- 下划线颜色继承父元素文字色（
color），无法单独设为红色 - 线型固定为实线（
solid），不能改成虚线或双线 - 位置固定在基线附近，遇到带降部的字体（如 g、y、q）可能贴得太近甚至被截断
所以推荐用完整语法显式声明：
text-decoration: underline red dashed;等价于：
text-decoration-line: underline + text-decoration-color: red + text-decoration-style: dashed。
立即学习“前端免费学习笔记（深入）”；
text-decoration-line / color / style / thickness 分开设置更可靠
现代浏览器支持将 text-decoration 拆成四个独立属性，避免简写覆盖问题，也方便动态修改（比如 JS 控制颜色）：
-
text-decoration-line：必须项，值为none、underline、overline、line-through或组合（如underline line-through） -
text-decoration-color：指定颜色，支持任意合法颜色值（#f00、rgb(255,0,0)、var(--link-accent)） -
text-decoration-style：线型，可选solid、dashed、dotted、wavy、double -
text-decoration-thickness：线宽，支持auto、from-font、具体长度（如2px）或百分比
示例（兼容性较好且效果清晰）：
a.special {
text-decoration-line: underline;
text-decoration-color: #007bff;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
}
实际使用时容易忽略的兼容性和细节
text-decoration-thickness 和 text-decoration-style: wavy 在 Safari 15.4+ 和 Firefox 70+ 才稳定支持；旧版 Chrome 需加 -webkit- 前缀（但已基本可不加）。更关键的是：
- 行内元素（如
span、a）才能生效；块级元素需设display: inline或inline-block - 下划线不会随文字缩放自动调整位置，长段落中不同字号混排时建议统一用
text-underline-offset微调距离（支持度同thickness） - 不要依赖
标签——HTML5 中它语义是“非文本标注”（如拼写错误、专有名词），不是视觉下划线
真正要加下划线，就老实用 CSS 的 text-decoration 系列属性，别绕弯。
