CSS 文本装饰
文本装饰
在本章中，您将学习以下属性
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
为文本添加装饰线
text-decoration-line 属性用于为文本添加装饰线。
提示：您可以组合多个值，例如 overline 和 underline，以便在文本上方和下方都显示线条。
示例
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-decoration 属性是以下属性的简写：
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 中的所有链接默认都有下划线。有时你会看到链接被 styled 为没有下划线。 text-decoration: none; 用于移除链接的下划线，如下所示：
所有 CSS text-decoration 属性
| 属性 | 描述 |
|---|---|
| text-decoration | 在一行声明中设置所有 text-decoration 属性 |
| text-decoration-color | 设置文本装饰的颜色 |
| text-decoration-line | 指定要使用的文本装饰的类型（下划线、上划线等） |
| text-decoration-style | 指定文本装饰的样式（实线、点线等） |
| text-decoration-thickness | 指定文本装饰线的粗细 |
