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浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
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;
}