例

改變下劃線文本中下劃線的顏色：

p

{

text-decoration: underline;

text-decoration-color: red;

-moz-text-decoration-color: red; /* 針對 Firefox 的代碼 */

}

瀏覽器支持

幾乎所有的主流瀏覽器都不支持 text-decoration-color 屬性。

Firefox 支持另一個可替代該屬性的屬性，即 -moz-text-decoration-color 屬性。

定義和用法

text-decoration-color 屬性規(guī)定文本修飾（下劃線 underline、上劃線 overline、中劃線 line-through）的顏色。

注意：只有在帶有可見的 text-decoration 的元素上，text-decoration-color 屬性才起作用。

CSS 語法

text-decoration-color: color|initial|inherit;

屬性值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

擊上方藍(lán)字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個問題！

說到text-decoration，用的最多的地方，可能就是a標(biāo)簽了，用來將a標(biāo)簽文本的下劃線去掉，我們通常設(shè)置：

a{text-decoration:none}

有沒有很熟悉的樣子，然而text-decoration其實是三個屬性的縮寫，如下所示：

• text-decoration-line

• text-decoration-color

• text-decoration-style

非常有意思，下面我?guī)Т蠹襾硪灰豢匆幌拢?/p>

一、看一下用法

1、text-decoration-line

定義：用來規(guī)定文本修飾要使用的線條類型。

取值：大概就是：none，underline，line-through(規(guī)定文本中間將顯示一條線)等等。

兼容性：看下面圖吧

咋一看，也還可以，firefox和Chrome,safari都還蠻好的。

接下來兩個主要看一下定義：

2、text-decoration-color

定義：用來規(guī)定文本修飾（下劃線 underline、上劃線 overline、中劃線 line-through）的顏色。

取值：所有顏色表示法。

兼容性：同上。

3、text-decoration-style

定義：用來規(guī)定線條如何顯示。

取值：solid和double和dotted和dashed等等。

兼容性：同上。

二、搞一個demo，讓概念在腦子里更清晰

發(fā)現(xiàn)自己最會搞demo了，同樣關(guān)于這幾個屬性的用法，我也來搞一個簡單的demo，看一下：

dom結(jié)構(gòu)就是三個不同class值的a標(biāo)簽（這里不貼代碼了）。

看一下樣式代碼如何寫：

就是按著上面概念，將text-decoration分三個屬性來寫?？匆幌抡故窘Y(jié)果：

沒有出乎意料之外，完畢了。接下來在總結(jié)里說兩個使用時的注意事項。

簡單總結(jié)一下：

注意幾個問題：

1、從概念上看，這個屬性是用于文本修飾，如P，h1~h4等，不僅是A元素。

2、這三種屬性可以簡寫，如：text-decoration: underline red solid。