text-decoration-style

**text-decoration-style** CSS 属性设置由 text-decoration-line 指定的线条的样式。该样式应用于所有使用 text-decoration-line 设置的线条。

试一试

如果指定的装饰具有特定的语义含义，例如删除线表示某些文本已被删除，则鼓励作者使用 HTML 标签（如 <del> 或 <s>）来表示此含义。由于浏览器在某些情况下可以禁用样式，因此在这种情况下，语义含义不会消失。

一次设置多个线条装饰属性时，使用 text-decoration 简写属性可能更方便。

语法

css
/* 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: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;

值

solid

绘制一条线。

double

绘制两条线。

dotted

绘制点状线。

dashed

绘制虚线。

wavy

绘制波浪线。

-moz-none

不绘制任何线条。请改用 text-decoration-line: none。

正式定义

初始值solid
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承否
计算值按指定
动画类型离散

正式语法

text-decoration-style = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

示例

设置波浪形下划线

以下代码创建了一个红色的波浪形下划线

CSS

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

HTML

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

结果

规范

规范
CSS 文本装饰模块级别 3
# text-decoration-style-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅