手册
目录
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; 来移除链接的下划线,如下所示:
a {
text-decoration: none;
}
运行实例 » 点击 "运行实例" 按钮查看在线示例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.3万人学习
共89课时
126.4万人学习