CSS text-decoration 属性

CSS text-decoration 语法

在 CSS 中，text-decoration 属性用于定义文本的装饰线（如下划线、删除线、顶划线）。

语法：

text-decoration: 关键字;

说明：

text-decoration 的取值有 3 种，如下表所示。

text-decoration 属性取值
取值	说明
none（默认值）	无划线效果
underline	下划线
line-through	中划线（删除线）
overline	顶划线

CSS text-decoration 摘要

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

CSS text-decoration 示例

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

示例 1：text-decoration 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { text-decoration: underline; }
        p:nth-child(2) { text-decoration: line-through; }
        p:nth-child(3) { text-decoration: overline; }
    </style>
</head>
<body>
    <p>这是“下划线”效果</p>
    <p>这是“删除线”效果</p>
    <p>这是“顶划线”效果</p>
</body>
</html>

页面效果如下图所示。

text-decoration 基本用法

分析：

我们都知道，超链接（a 元素）默认样式有下划线，如 “<a href="https://www.lvyenet.com">绿叶网</a>” 这一句代码，其效果如下图所示。

带下划线的超链接

这种下划线效果是比较丑的，此时我们就可以使用 text-decoration: none; 去除了，请看下面例子。

示例 2：text-decoration 去除超链接下划线

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { text-decoration: underline; }
        p:nth-child(2) { text-decoration: line-through; }
        p:nth-child(3) { text-decoration: overline; }
        a { text-decoration: none; }
    </style>
</head>
<body>
    <a href="https://www.lvyenet.com">绿叶网</a>
</body>
</html>

页面效果如下图所示。

text-decoration去除超链接下划线

text-decoration 是一个复合属性（CSS3+）

在 CSS3 中，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。

示例 3：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;