text-decoration-color

版本：CSS3

CSS 属性 text-decoration-color 用于设置文本修饰线的颜色，文本修饰线是通过 text-decoration-line 属性指定的。修饰线包括下划线、上划线、删除线和波浪线，波浪线的典型用途是标明内容拼写错误（仅举例）。被指定的颜色会作用到该属性值有效范围内的所有修饰线上。CSS 没有直接的机制为每种线型指定唯一的颜色，不过可以通过嵌套元素的方法来实现这种效果：用 text-decoration-line 属性为每个元素应用一种线型，再用 text-decoration-color 指定线的颜色。

示例

/* <color> values */
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/* global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

浏览器支持

IE浏览器不支持text-decoration-color，其余浏览器都支持text-decoration-color

语法:

text-decoration-color:<color>

取值:

<color>:指定颜色。取值：rgb()| rgba()| hsl()| hsla()| hex-color| named-color| currentcolor| deprecated-system-color

说明:

检索或设置对象中的文本装饰线条的颜色。

• 对应的脚本特性为textDecorationColor。

CSS属性text-decoration-color用于设置文本修饰线的颜色。文本修饰线是通过text-decoration-line属性指定的，修饰线包括下划线、上划线、删除线和波浪线，波浪线的典型用途是标明内容拼写错误（仅举例）。被指定的颜色会作用到该属性值有效范围内的所有修饰线上。

当要设置多个线修饰属性时，用text-decoration简写属性会比分别写多个属性更方便。

例子

p{
 text-decoration:underline;
 text-decoration-color:red;
 -moz-text-decoration-color:red; /*针对firefox的代码*/
}

<p>this paragraph has <s>some erroneous text</s> inside it that i want to call attention to.</p>

p { 
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}