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 中的所有链接默认都是带下划线的。有时你会看到链接没有下划线。使用 text-decoration: none; 可以移除链接的下划线，就像这样
所有 CSS text-decoration 属性
| 属性 | 描述 |
|---|---|
| text-decoration | 在一个声明中设置所有 text-decoration 属性 |
| text-decoration-color | 指定文本装饰的颜色 |
| text-decoration-line | 指定要使用的文本装饰类型（下划线、上划线等） |
| text-decoration-style | 指定文本装饰的样式（实线、虚线等） |
| text-decoration-thickness | 指定文本装饰线的粗细 |
