CSS 文字装饰

文字装饰

在本章中，您将了解以下属性：

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

向文本添加装饰线

这个text-decoration-line属性用于向文本添加装饰线。

提示：您可以组合多个值，例如上划线和下划线，以在文本上方和下方显示线条。

示例

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}

亲自试一试 »

笔记：不建议在非链接的文本下划线，因为这常常会让读者感到困惑。

指定装饰线的颜色

这个text-decoration-color属性用于设置装饰线的颜色。

示例

h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}

h3 {
text-decoration-line: underline;
text-decoration-color: green;
}

p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}

亲自试一试 »

指定装饰线的样式

这个text-decoration-style属性用于设置装饰线的样式。

示例

h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}

h2 {
text-decoration-line: underline;
text-decoration-style: double;
}

h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}

p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}

p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}

p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}

亲自试一试 »

指定装饰线的粗细

这个text-decoration-thickness属性用于设置装饰线的粗细。

示例

h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}

h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}

h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}

亲自试一试 »

简写属性

这个text-decorationproperty 是以下属性的简写：

text-decoration-line（必需的）
text-decoration-color（选修的）
text-decoration-style（选修的）
text-decoration-thickness（选修的）

示例

h1 {
text-decoration: underline;
}

h2 {
text-decoration: underline red;
}

h3 {
text-decoration: underline red double;
}

p {
text-decoration: underline red double 5px;
}

亲自试一试 »

一个小提示

默认情况下，HTML 中的所有链接都带有下划线。有时您会看到链接的样式没有下划线。这text-decoration: none;用于删除链接中的下划线，如下所示：

示例

a {
text-decoration: none;
}

亲自试一试 »

所有 CSS text-decoration 属性

Property	Description
text-decoration	Sets all the text-decoration properties in one declaration
text-decoration-color	Specifies the color of the text-decoration
text-decoration-line	Specifies the kind of text decoration to be used (underline, overline, etc.)
text-decoration-style	Specifies the style of the text decoration (solid, dotted, etc.)
text-decoration-thickness	Specifies the thickness of the text decoration line