CSS text-decoration-thickness 属性

CSS text-decoration-thickness 语法

text-decoration-thickness 是 text-decoration 的子属性，它用于定义元素内文本装饰线的粗细。

语法：

text-decoration-thickness: 数值;

说明：

text-decoration-thickness 的取值是数值，比如像素值（px）、百分比（%）、rem 值等，默认值是 auto。

注意:

text-decoration-thickness 属性只有当 text-decoration-line 属性的值不是 none 时才会生效。
text-decoration-thickness 属性使用绝对长度单位（如 px）设置粗细可以获得精确控制，但可能在不同字体大小下看起来不协调。而使用相对单位（如 em）或 auto 通常能更好地适应文本大小。

CSS text-decoration-thickness 摘要

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

CSS text-decoration-thickness 示例

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

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

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p { text-decoration: underline; }
        p:nth-child(1) { text-decoration-thickness: 1px; }
        p:nth-child(2) { text-decoration-thickness: 3px; }
        p:nth-child(3) { text-decoration-thickness: 5px; }
    </style>
</head>
<body>
    <p>罗马不是一天建成的。</p>
    <p>罗马不是一天建成的。</p>
    <p>罗马不是一天建成的。</p>
</body>
</html>

页面效果如下图所示。

text-decoration-thickness 基本用法

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;