
向文本添加修饰线 text-decoration-line
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
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
属性是简写属性:
-
text-decoration-line
(必填) -
text-decoration-color
(可选) -
text-decoration-style
(可选) -
text-decoration-thickness
(可选)
默认情况下,HTML 中的所有链接都带有下划线。有时你 看到链接的样式没有下划线。text-decoration: none;
用于删除链接的下划线,
a {
text-decoration: none;
}
网友评论