CSS text-decoration-style 属性

定义和用法

text-decoration-style 属性设置文本装饰的类型（实线、波浪线、点线、虚线、双线）。

提示：同时请参阅 text-decoration 属性，它是这三个属性的简写属性：

  • text-decoration-line
  • text-decoration-style
  • text-decoration-color

另请参阅：

CSS 教程：CSS 文本

HTML DOM 参考手册：textDecorationStyle 属性

实例

设置不同类型的 text-decoration 样式：

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;
}

亲自试一试

CSS 语法

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

属性值

值 描述
solid 默认值。线条显示为单行。
double 线条显示为双线。
dotted 线条显示为点线。
dashed 线条显示为虚线。
wavy 线条显示为波浪线。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： solid
继承： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.textDecorationStyle="wavy"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -moz- 的数字表示使用前缀的首个版本。

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 36.0
6.0 -moz-		 12.1 44.0