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

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

该text-decoration-color CSS属性设置由text-decoration-line属性所指定的线条的颜色。该颜色会应用于所有指定的线条。当一次设置多个线条装饰属性时，使用text-decoration简写属性可能会更方便。

/*  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属性）来实现。

语法

可能值

装饰线条的颜色。

形式语法

where 
 =  |  |  |  |  |  | currentcolor | 
where 
 = rgb( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = rgba( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = hsl( [  [ /  ]? ] | [ , , , ? ] )
 = hsla( [  [ /  ]? ] | [ , , , ? ] )
where 
 =  |  =  | 

实例

This paragraph has some erroneous text
    inside it that I want to call attention to.

p { 
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

规范

浏览器兼容性