CSS 文本修饰
CSS 文本装饰
在本章中您将了解以下属性：
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
为文本添加装饰线
这 text-decoration-line 属性用于给文本添加装饰线。
提示： 您可以组合多个值，例如上划线和下划线以在文本上方和下方显示线。
笔记： 不建议给非链接的文本加下划线，因为这常常会让读者感到困惑。
指定装饰线的颜色
这 text-decoration-color 属性用于设置装饰线的颜色。
例子
h1 {
文字装饰线：上划线；
文字装饰颜色：红色；
}
h2 {
文字修饰线：划线；
文字装饰颜色：蓝色；
}
h3 {
文字装饰线：下划线；
文字装饰颜色：绿色；
}
磷{
文字修饰线：上划线下划线；
文字装饰颜色：紫色；
}
亲自尝试 »
指定装饰线的样式
这 text-decoration-style 属性用于设置装饰线的风格。
例子
h1 {
文字装饰线：下划线；
文字装饰样式：实心；
}
h2 {
文字装饰线：下划线；
文字装饰样式：双重；
}
h3 {
文字装饰线：下划线；
文字装饰样式：虚线；
}
p.ex1 {
文字装饰线：下划线；
文字装饰样式：虚线；
}
p.ex2 {
文字装饰线：下划线；
文字装饰样式：波浪形；
}
p.ex3 {
文字装饰线：下划线；
文字装饰颜色：红色；
文字装饰样式：波浪形；
}
亲自尝试 »
指定装饰线的粗细
这 text-decoration-thickness 属性用于设置装饰线的粗细。
例子
h1 {
文字装饰线：下划线；
文字装饰粗细：自动；
}
h2 {
文字装饰线：下划线；
文字装饰厚度：5px；
}
h3 {
文字装饰线：下划线；
文字装饰厚度：25%；
}
磷{
文字装饰线：下划线；
文字装饰颜色：红色；
文字装饰样式：双重；
文字装饰厚度：5px；
}
亲自尝试 »
简写属性
这 text-decoration property 是以下属性的简写：
text-decoration-line（必需的）text-decoration-color（选修的）text-decoration-style（选修的）text-decoration-thickness（选修的）
小提示
HTML 中的所有链接默认都带有下划线。有时您会看到链接没有下划线。 text-decoration: none; 用于删除链接的下划线，如下所示：
所有 CSS 文本装饰属性
| 财产 | 描述 |
|---|---|
| 文字修饰 | 在一个声明中设置所有文本装饰属性 |
| 文字装饰颜色 | 规定文本装饰的颜色 |
| 文字修饰线 | 指定要使用的文本修饰类型（下划线、上划线等） |
| 文字装饰风格 | 指定文本装饰的样式（实线、虚线等） |
| 文字修饰粗细 | 指定文本装饰线的粗细 |
