1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 属性
  5. text-decoration-style

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

text-decoration-style

基线 广泛可用

自 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 id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">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;

值

solid

画一条实线。

double

画一条双实线。

dotted

画一条点划线。

dashed

画一条虚线。

wavy

画一条波浪线。

-moz-none

不画线。亦可用 text-decoration-line: none 替代。

形式语法

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 class="wavy">This text has a wavy red line beneath it.</p>

规范

规范
CSS Text Decoration Module Level 3
# text-decoration-style-property

浏览器兼容性

参见

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

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题