text-decoration-color

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;

<color>
修饰文本的线的颜色。

格式化语法

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

示例

<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;
}

Accessibility concerns

It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.

Color alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enouch to indicate a link has focus.

规范

规范 状态 备注
CSS Text Decoration Module Level 3
text-decoration-color
Candidate Recommendation 初次定义。text-decoration 属性成为定义多个相关属性的简写形式。

浏览器兼容性

BCD tables only load in the browser

另请参阅