text-decoration-style
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
替代。
格式化语法
示例
.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
另请参阅
- 当要设置多个线修饰属性时,用
text-decoration
简写属性会比分别写多个属性更方便