参考手册
CSS 属性大全
text-decoration-line
text-indent
返回 CSS 属性大全

CSS text-decoration-style 属性

CSS text-decoration-style 属性用于设置由 text-decoration-line 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。

实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div.a {
  6.   text-decoration-line: underline;
  7.   text-decoration-style: solid;
  8. }
  10. div.b {
  11.   text-decoration-line: underline;
  12.   text-decoration-style: wavy;
  13. }
  15. div.c {
  16.   text-decoration-line: underline;
  17.   text-decoration-style: double;
  18. }
  20. div.d {
  21.   text-decoration-line: overline underline;
  22.   text-decoration-style: wavy;
  23. }
  24. </style>
  25. </head>
  26. <body>
  28. <h1>text-decoration-style 属性</h1>
  30. <div class="a">这是顶部有一条线的文本。</div>
  31. <br>
  33. <div class="b">这是带有下划线的文本</div>
  34. <br>
  36. <div class="c">这是一条线贯穿文本。</div>
  37. <br>
  39. <div class="d">这是顶部有一条线，同时又带有下划线的文本。</div>
  41. <p><b>注释：</b>版本 79 之前的 Edge 不支持 text-decoration-line 属性。</p>
  43. </body>
  44. </html>
运行一下

定义和用法

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

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

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

浏览器支持

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

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

属性
text-decoration-style57.079.036.06.0 -moz-12.144.0

CSS 语法

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

相关页面

CSS 教程：CSS 文本

text-decoration-line
text-indent

分类导航