text-decoration用于设置文本装饰，可控制下划线、删除线等样式，常用于去除链接下划线、标注失效价格及自定义下划线颜色与线型，推荐使用text-decoration-line、color、style子属性以获得更精确控制。
在CSS中，text-decoration 属性用于设置或删除文本的装饰效果。它是一个简写属性，可以同时控制下划线、上划线、删除线以及文本下的颜色和样式。这个属性常用于链接样式、强调文本或去除默认样式。
基本语法
text-decoration 可以设置一个或多个值，语法如下：text-decoration: || || ;常见取值包括：
- none：默认值，不显示任何文本装饰。
- underline：在文本下方添加一条线。
- overline：在文本上方添加一条线。
- line-through：在文本中间画一条贯穿线（删除线）。
- blink：让文本闪烁（大多数浏览器已弃用）。
常见使用场景
1. 去除链接的下划线超链接（a标签）默认带有下划线，可以通过以下方式去除：```cssa {
text-decoration: none;
}
```
2. 添加删除线表示已失效内容比如在价格对比中，原价加删除线：css<br>.old-price {<br> text-decoration: line-through;<br>}<br>
3. 自定义下划线样式（CSS3扩展）CSS3 扩展了 text-decoration，支持颜色和线型：css<br>p {<br> text-decoration: underline red wavy;<br>}<br>这会创建一条红色波浪形下划线。
立即学习“前端免费学习笔记（深入）”；
子属性（现代用法）
现在更推荐使用独立的子属性来获得更好的控制：- text-decoration-line：指定装饰线类型（如 underline, line-through）。
- text-decoration-color：设置装饰线颜色。
- text-decoration-style：设置线型，如 solid（实线）、double（双线）、dotted（点线）、dashed（虚线）、wavy（波浪线）。
示例：css<br>h1 {<br> text-decoration-line: underline;<br> text-decoration-color: blue;<br> text-decoration-style: wavy;<br>}<br>
注意事项
text-decoration 会影响可访问性。例如，仅靠下划线区分链接可能对色盲用户不友好，建议结合颜色或字体变化。另外，text-decoration 的继承行为有时不可预测，某些情况下子元素不会自动继承，需显式设置。基本上就这些。合理使用 text-decoration 能提升页面可读性和视觉层次，关键在于根据内容语义选择合适的装饰方式。
