DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 的免费信用额度！
text-decoration-color 属性设置带有 text-decoration 属性应用的文本的下划线、上划线或删除线的颜色。 它也可以设置链接的下划线颜色。
a {
text-decoration-color: #E18728;
}值
text-decoration-color 可以 inherit 或接受任何 CSS 颜色值，包括命名颜色、HEX 颜色、RGBa 和 HSLa。
简写
在支持 text-decoration-style 和 text-decoration-color 的浏览器中，可以将颜色添加到 text-decoration 简写属性
.underlined {
text-decoration: underline dotted red;
}目前只有 Firefox 支持此非前缀版本。 Safari 支持带有 -webkit 前缀的版本。 Chrome 也需要 -webkit 前缀，并且需要在 Chrome 标记中启用实验性 Web 平台功能。
演示
此演示中的 text-decoration-color 在当前版本的 Firefox 和 Safari 中有效。 它在启用了“实验性 Web 平台功能”标志的 Chrome 中也有效。
浏览器支持
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31† | 7.1* | 6.0‡ | 无 | 无 | 无 | 8* |
† 启用了 chrome://flags 中的“实验性 Web 平台功能”。 Chrome 31 需要 -webkit- 前缀。 我们测试了 Chrome 50，它仅在无前缀情况下有效。
‡ 6+ 带有 -moz 前缀，从 36 开始无前缀。
更多信息
相关
text-decoration
.element { text-decoration: underline; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-skip
.element { text-decoration-skip: ink; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
这让我终于想用 text-decoration :) 终于下划线会有一种有趣的外观
不幸的是，似乎
transition或:visited到目前为止都无法与 text-decoration 一起使用。为什么不支持这个？ 考虑到 text-decoration 在浏览器之间受支持，这似乎应该做的事情。
我在 Chrome 54 中测试了这个，它不带前缀也不带前缀都无法使用。
嗨，我在 Chrome 55 中测试了这个，带前缀或不带前缀都无法使用，在 Safari 10 中仅带前缀有效，而在 Firefox 50.1 中不带前缀有效。