1. Web
  2. CSS
  3. text-decoration-style

text-decoration-style

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

text-decoration-style CSS 属性用于设置 text-decoration-line 指定的文本装饰线的样式。该样式适用于所有通过 text-decoration-line 设置的文本装饰线。

试一试

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>）来表示此含义。由于浏览器在某些情况下可能会禁用样式，因此在这种情况下，语义含义不会消失。

当同时设置多个线条装饰属性时，使用 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

绘制虚线。

波浪线

绘制波浪线。

-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 属性

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者 最后修改于 。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.