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 属性成为定义多个相关属性的简写形式。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decoration-colorChrome Full support 57Edge Full support 79Firefox Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 44Safari Full support 12.1
Full support 12.1
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 43Safari iOS Full support 12.2
Full support 12.2
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

另请参阅