HTML | DOM 样式 textDecorationColor 属性

介绍

textDecorationColor 属性用于定义文本修饰线（文本下划线、删除线、顶划线等）的颜色。之前 textDecoration 属性可以设置文本修饰线的样式、宽度和颜色，但它们现在已被分成三个单独属性：textDecorationLine、textDecorationWidth、textDecorationColor。

textDecorationColor 属性仅适用于具有文本修饰线的文本。如果 textDecorationLine 没有设置，那么 textDecorationColor 不会起作用。

语法

textDecorationColor 属性的语法如下所示：

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

默认值： currentColor

属性值：

• color：指定文本修饰线的颜色，可以使用任何 CSS 颜色值（如 red、#ff0000）。
• initial：将属性重置为其默认值。
• inherit：继承父元素的属性值。

实例

下面的示例演示了如何使用 textDecorationColor 属性来设置文本的下划线颜色：

<p style="text-decoration-line: underline;
           text-decoration-color: blue;
           text-decoration-style: double;">
  这是一个由双下划线组成、颜色为蓝色的文本。
</p>

效果如下所示：

这是一个由双下划线组成、颜色为蓝色的文本。

浏览器支持性

| Chrome | Firefox | IE | Opera | Safari | | ------ | ------- | -- | ----- | ------ | | 57+ | 36+ | ❌ | 44+ | 12+ |

参考链接

• MDN web docs：textDecorationColor property