text-decoration-style - CSS（层叠样式表） 编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

如果设定的修饰效果具有特定的语义，例如删除线的意味着某些文本被删除了，开发者最好使用有语义的 HTML 标签来表达，比如 <del> 或 <s> 标签，因为浏览器有时可能会屏蔽某些样式，但语义化的标签则不会出现这样的问题。

当一次使用多个 line-decoration 属性时，使用 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;

值

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>

规范

规范	状态	备注
CSS Text Decoration Module Level 3 text-decoration-style	Candidate Recommendation	初次定义。text-decoration 属性同时变成了定义多个相关属性的简写形式。

浏览器兼容性

BCD tables only load in the browser

 

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

 

另请参阅

• 当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便