text-decoration-color

**text-decoration-color** 属性用于设置通过 text-decoration-line 添加到文本的装饰的颜色，它属于 CSS 属性。

该颜色应用于装饰，例如下划线、上划线、删除线和波浪线（如用于标记拼写错误的波浪线），该颜色的范围由该属性值的范围决定。

尝试一下

CSS 没有提供直接指定每种线型独特颜色的机制。然而，这种效果可以通过嵌套元素来实现，对每个元素应用不同的线型（使用 text-decoration-line 属性），并为每个元素分别指定线型颜色（使用 text-decoration-color）。

语法

css
/* <color> values */
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgb(255 128 128 / 50%);
text-decoration-color: transparent;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;

值

<color>

线装饰的颜色。

无障碍

务必确保文本颜色、文本所在的背景颜色和文本装饰线的对比度足够高，以便视力较差的人能够阅读页面内容。颜色对比度是通过比较文本和背景颜色值的亮度来确定的。

不要单独使用颜色来传达含义。例如，仅仅改变文本和 text-decoration-color 不足以表明链接已获得焦点。

正式定义

初始值currentcolor
应用于所有元素。它也应用于 ::first-letter 和 ::first-line.
继承否
计算值计算后的颜色
动画类型一个 颜色

正式语法

text-decoration-color = 
  <color>

示例

基本示例

html
<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>
css
p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

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

规范

规范
CSS 文本装饰模块级别 3
# text-decoration-color-property

浏览器兼容性

BCD 表格只在启用 JavaScript 的浏览器中加载。

另请参阅