文本装饰-颜色 | text-decoration-color (Text Decoration) - CSS 中文开发手册 - Break易站

• | 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