CSS text-decoration-style 属性
示例
设置不同类型的文本装饰样式
div.a {
text-decoration-line: underline;
text-decoration-style: solid;
}
div.b {
text-decoration-line: underline;
text-decoration-style: wavy;
}
div.c {
text-decoration-line: underline;
text-decoration-style: double;
}
div.d {
text-decoration-line: overline underline;
text-decoration-style: wavy;
}
亲自尝试 »
定义和用法
The text-decoration-style 属性设置文本装饰的样式（如实线、波浪线、点线、虚线、双线）。
提示： 还可以查看 text-decoration 属性，它是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 的简写属性。
| 默认值 | solid |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 阅读有关可动画的信息 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.textDecorationStyle="wavy" 尝试一下 |
浏览器支持
表格中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| text-decoration-style | 57 | 79 | 36 | 12.1 | 44 |
CSS 语法
text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| solid | 默认值。线条将显示为单线。 | 演示 ❯ |
| double | 线条将显示为双线。 | 演示 ❯ |
| dotted | 线条将显示为点线。 | 演示 ❯ |
| dashed | 线条将显示为虚线。 | 演示 ❯ |
| wavy | 线条将显示为波浪线。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 阅读有关initial的信息 | |
| inherit | 从其父元素继承此属性。 阅读有关inherit的信息 |
相关页面
CSS 教程：CSS 文本装饰
HTML DOM 参考：textDecorationStyle 属性
