文本装饰-颜色 | text-decoration-color (Text Decoration) - CSS 中文开发手册
该text-decoration-color CSS属性设置由text-decoration-line属性所指定的线条的颜色。该颜色会应用于所有指定的线条。当一次设置多个线条装饰属性时，使用text-decoration简写属性可能会更方便。
/* <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;
CSS不提供为每种线类型指定唯一颜色的直接机制。然而，这种效果可以通过嵌套元素实现：即对每个元素应用不同的线条类型（通过text-decoration-line属性），并以每个元素为基础指定线条颜色（通过text-decoration-color属性）来实现。
| Initial value | currentcolor |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Media | visual |
| Computed value | computed color |
| Animation type | a color |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
可能值
<color>装饰线条的颜色。
形式语法
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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;
} 规范
| Specification | Status | Comment |
|---|---|---|
| CSS Text Decoration Module Level 3The definition of 'text-decoration-color' in that specification. | Candidate Recommendation | Initial definition. The text-decoration property is now a shorthand to define multiple related properties. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 57 | 6.0 (6.0) - 39.0 (39.0)-moz 36.0 (36.0) without prefix | No support | 44 | 7.1 -webkit |
| Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 57 | 57 | 6.0 (6.0) - 39.0 (39.0)-moz 36.0 (36.0) without prefix | No support | 44 | 8 -webkit |