此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
text-decoration-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
CSS 属性text-decoration-style 用于设置由text-decoration-line 设定的线的样式。线的样式会应用到所有被text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用text-decoration 简写属性会比分别写多个属性更方便。
尝试一下
text-decoration-style: solid;text-decoration-style: double;text-decoration-style: dotted;text-decoration-style: dashed;text-decoration-style: wavy;<section> <p> I'd far rather be <span>happy than right</span> any day. </p></section>p { font: 1.5em sans-serif;}#example-element { text-decoration-line: underline;}如果设定的修饰效果具有特定的语义，例如删除线的意味着某些文本被删除了，开发者最好使用有语义的 HTML 标签来表达，比如<del> 或<s> 标签，因为浏览器有时可能会屏蔽某些样式，但语义化的标签则不会出现这样的问题。
当一次使用多个 line-decoration 属性时，使用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: unset;值
形式语法
text-decoration-style =
solid|
double|
dotted|
dashed|
wavy
示例
css
.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;}css
.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red;}html
<p>This text has a wavy red line beneath it.</p>规范
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-style-property |
浏览器兼容性
参见
- 当要设置多个线修饰属性时，用
text-decoration简写属性会比分别写多个属性更方便