例

改变下划线文本中下划线的颜色：

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 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。

注意：只有在带有可见的 text-decoration 的元素上，text-decoration-color 属性才起作用。

CSS 语法

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

属性值

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

说到text-decoration，用的最多的地方，可能就是a标签了，用来将a标签文本的下划线去掉，我们通常设置：

a{text-decoration:none}

有没有很熟悉的样子，然而text-decoration其实是三个属性的缩写，如下所示：

• text-decoration-line

• text-decoration-color

• text-decoration-style

非常有意思，下面我带大家来一一看一下：

一、看一下用法

1、text-decoration-line

定义：用来规定文本修饰要使用的线条类型。

取值：大概就是：none，underline，line-through(规定文本中间将显示一条线)等等。

兼容性：看下面图吧

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

接下来两个主要看一下定义：

2、text-decoration-color

定义：用来规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。

取值：所有颜色表示法。

兼容性：同上。

3、text-decoration-style

定义：用来规定线条如何显示。

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

兼容性：同上。

二、搞一个demo，让概念在脑子里更清晰

发现自己最会搞demo了，同样关于这几个属性的用法，我也来搞一个简单的demo，看一下：

dom结构就是三个不同class值的a标签（这里不贴代码了）。

看一下样式代码如何写：

就是按着上面概念，将text-decoration分三个属性来写。看一下展示结果：

没有出乎意料之外，完毕了。接下来在总结里说两个使用时的注意事项。

简单总结一下：

注意几个问题：

1、从概念上看，这个属性是用于文本修饰，如P，h1~h4等，不仅是A元素。

2、这三种属性可以简写，如：text-decoration: underline red solid。