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 July 2015.

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

尝试一下

如果设定的修饰效果具有特定的语义,例如删除线的意味着某些文本被删除了,开发者最好使用有语义的 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>

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-style
wavy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见

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