CSS text-decoration 属性用于设置文本的装饰线(下划线、上划线和删除线)，或移除已有的文本装饰线。

在CSS3中，text-decoration属性是text-decoration-line、text-decoration-color和text-decoration-style属性的简写属性。与其它CSS简写属性一样，text-decoration属性中没有明确指出的具体属性将会被设置为它们的初始值。

text-decoration属性可以忽略text-decoration-color和text-decoration-style属性，它们会被设置为初始值。这意味着CSS3级text-decoration属性是完全兼容CSS2和CSS1中的text-decoration属性的。如果浏览器不支持CSS3 text-decoration属性，则会使用CSS2或CSS1级的text-decoration属性。

下面是几种文本装饰线的效果：

文本装饰线效果，从上到下分别是：下划线，上划线和删除线。

text-decoration属性可以接收多个装饰线值，各个值之间使用空格来分开。

装饰线中有一个取值blink是文本闪烁效果，这是一个过时的属性，不建议使用。某些浏览器可能不支持这个效果。

值line-through是删除线效果，用于表示某个事物已经过时或被删除。建议使用HTML标记或来表示被删除的文本，这样在语义上能够很好的体现。

text-decoration属性会级联，意思是在父元素上设置了某种文本装饰线效果，其后代元素不能将装饰线删除。例如有下面的一段HTML代码：

This text has some emphasized words in it.

如果为

元素应用了装饰线属性：

p { text-decoration: underline }

则会对整段文字添加下划线效果。如果后面再为元素设置text-decoration: none，想要取消元素的下划线效果是不能办到的。此时整个段落仍然有下划线效果。但是可以通过下面的代码为元素添加新的装饰线样式。

em { text-decoration: overline }

官方语法

text-decoration: none | overline | line-through | underline | blink

新的CSS3语法如下：

text-decoration: || ||

参数：

none：不为文本添加装饰线。如果文本已经存在装饰线则将装饰线删除。

overline：装饰线在文本上方。多行文本中，每一行文本上方都有一条装饰线。

line-through：删除线样式装饰线。多行文本中，每一行文本都有删除线。

underline：装饰线在文本下方。多行文本中，每一行文本下方都有一条装饰线。

blink：文本闪烁。这个值已经过时，不建议使用。

text-decoration属性的初始值为none。

应用范围

text-decoration属性可以应用在所有元素上。

示例代码

text-decoration: none;

text-decoration: underline red;

text-decoration: underline wavy red;

text-decoration: inherit;

为一段文本添加下划线效果。

p.underlined {

text-decoration: underline;

}

在线演示

下面的例子演示了各种装饰线的效果。

这是下划线效果。

这是上划线效果。

这是删除线效果。

同时带有上划线和下划线的效果。

浏览器支持

所有现代浏览器都支持text-decoration属性，包括：Chrome, Firefox, Safari, Opera, IE, Android 和 iOS。

各个具体的装饰线属性目前只有Firefox 6+浏览器才支持。

相关阅读