CSS | text-decoration-style 属性

在CSS中，text-decoration-style属性用于定义文本装饰的样式。该属性仅在已定义文本装饰线条时生效。它可以与text-decoration-line一起使用，该属性定义了要应用哪些文本装饰（如下划线、删除线等）。

语法

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

• none: 默认值，没有任何文本装饰线。
• solid: 使用实线。
• double: 使用双线。
• dotted: 使用点状线。
• dashed: 使用短划线。
• wavy: 使用波浪线。

可继承性

text-decoration-style属性不可以被继承。

示例

下面是一个使用text-decoration-style属性的示例：

<p class="underline-dotted">这是一个带点状下划线的段落。</p>
<p class="underline-double">这是一个带双线下划线的段落。</p>
<p class="underline-wavy">这是一个带波浪线的段落。</p>

.underline-dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.underline-double {
  text-decoration-line: underline;
  text-decoration-style: double;
}

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

上述示例中，分别定义了带点状下划线、双线下划线和波浪线的段落。演示效果如下图所示：

浏览器兼容性

text-decoration-style属性的浏览器兼容性良好，目前主流的现代浏览器都支持该属性。

参考资料

• MDN web docs