CSS text-decoration-color 属性

CSS text-decoration-color 语法

text-decoration-color 是 text-decoration 的子属性，它用于定义划线（如上划线、下划线等）的颜色。

语法：

text-decoration-color: 颜色值;

说明：

text-decoration-color 的取值是一个颜色值，包括以下几种情况（常用的是前 4 种）。

关键字，比如 red、orange、skyblue 等。
十六进制值，比如 #F1F1F1。
RGB 值，比如 rgb(255, 255, 255)。
RGBA 值，比如 rgba(255, 255, 255, 1.0)。
HSL 值，比如 hsl(60deg 75% 45%)。
HSLA 值，比如 hsla(60deg 75% 45% / 60%)。
HWB 值，比如 hwb(120deg 0% 50% / 75%)。

注意: text-decoration-color 属性只有当 text-decoration-line 属性的值不是 none 时才会生效。

CSS text-decoration-color 摘要

属于	CSS 划线
使用频率	低
是否继承	否
默认值	currentColor
兼容性	查看
官方文档	查看
MDN	查看

CSS text-decoration-color 示例

接下来，我们通过一个简单的例子来讲解一下 CSS text-decoration-color 属性是如何使用的。

示例 1：text-decoration-color 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p { text-decoration: underline; }
        p:nth-child(1) { text-decoration-color: red; }
        p:nth-child(2) { text-decoration-color: #22A60E; }
        p:nth-child(3) { text-decoration-color: rgba(61, 219, 221, 1.0); }
    </style>
</head>
<body>
    <p>罗马不是一天建成的。</p>
    <p>罗马不是一天建成的。</p>
    <p>罗马不是一天建成的。</p>
</body>
</html>

页面效果如下图所示。

text-decoration-color 基本用法

text-decoration 相关子属性

text-decoration 实际上是一个复合属性，相当于以下 4 个 CSS 属性的简写。

text-decoration 子属性
子属性	说明
text-decoration-line	定义装饰类型，如 underline、line-through 等，默认值为 none。
text-decoration-style	定义线条样式，如 "solid"、"dashed"、"wavy"，默认值为 "solid"。
text-decoration-color	定义装饰颜色，如 "red"、"#FFFFFF" 等，默认值为 currentcolor。
text-decoration-thickness	定义线条粗细，默认值为 auto。

示例 2：text-decoration 复合属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p { text-decoration: underline dashed red 3px; }
    </style>
</head>
<body>
    <p>绿叶网 - 为好教程，全力以赴</p>
</body>
</html>

页面效果如下图所示。

text-decoration是一个复合属性

分析：

text-decoration: underline dashed red 3px;

上面代码等价于：

text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: red;
text-decoration-thickness: 3px;

在使用 text-decoration，如果你没有显式定义某个子属性值，则表示使用该子属性的默认值。比如 text-decoration: underline;，其实等价于：

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: currentcolor;
text-decoration-thickness: auto;