文本装饰风格 | text-decoration-style

该text-decoration-style CSS属性设置由text-decoration-line指定的线的样式。该样式适用于所有指定的线条，但没有办法为text-decoration-line定义的每个线条设定不同的样式。当要一次设置多个线条装饰属性时，使用text-decoration简写属性可能会更方便。

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

如果指定的修饰具有特定的语义含义，如直通线意味着某些文本已被删除，那么鼓励作者使用HTML标记（如，<del>或<s>）来表示该含义。由于浏览器在某些情况下可能会禁用样式，所以在这种情况下，采用HTML标记可以使得该语义并不会消失。

语法

可能值

solid——绘制单行实线

double——绘制双行实线

dotted——绘制一条虚线(点状)

dashed——绘制一条虚线(短线状)

wavy——绘制一条波浪线

-moz-none——不绘制线，非标准接口，使用text-decoration-line: none作为代替。

形式语法

solid | double | dotted | dashed | wavy

实例

.example {    
       -moz-text-decoration-line: underline;
       -moz-text-decoration-style: wavy;
       -moz-text-decoration-color: red;    
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: red;
}

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

<p class="wavy">This text has a wavy red line beneath it.</p>

规范

浏览器兼容性