text-decoration用于设置文本装饰效果,如underline下划线、line-through删除线、overline上划线,支持颜色、样式、粗细等属性,可简写为text-decoration: line style color thickness,常用于去除链接下划线或标注价格删除线。

在CSS中,text-decoration 属性用于为文本添加装饰效果,比如下划线、上划线、删除线等。它是一个简写属性,可以分别设置线条的类型、颜色和样式位置。
基本语法
text-decoration: none | underline | overline | line-through | blink;- none:默认值,无装饰线(常用于去除链接的下划线)
- underline:文字下方加线
- overline:文字上方加线
- line-through:穿过文字中间的删除线
- blink:让文本闪烁(大多数浏览器已不再支持)
示例:
.underline { text-decoration: underline; } .delete { text-decoration: line-through; } .top-line { text-decoration: overline; } .no-underline { text-decoration: none; }扩展属性(CSS3)
现代浏览器支持更细粒度的控制,你可以使用以下子属性:- text-decoration-line:指定装饰线的位置(underline, overline, line-through)
- text-decoration-color:设置线条颜色
- text-decoration-style:设置线条样式(solid, double, dotted, dashed, wavy)
- text-decoration-thickness:设置线条粗细
示例:
.wavy-red { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; }.thick-blue {
text-decoration: underline blue;
text-decoration-thickness: 2px;
}
简写用法
你可以把多个值写在 text-decoration 一行中:text-decoration: underline red wavy 2px;
立即学习“前端免费学习笔记(深入)”;
顺序不限,但推荐按 “line style color thickness” 的逻辑书写。
常见应用场景
- 去除超链接默认下划线:a { text-decoration: none; } - 显示删除价:.old-price { text-decoration: line-through; } - 强调标题或关键词:.highlight { text-decoration: overline underline; }(可同时应用多条线)基本上就这些。text-decoration 简单实用,配合颜色和样式能让文本更有表现力。










