text-decoration-style

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

text-decoration-style CSS property sets the style of the lines specified by text-decoration-line . The style applies to all lines that are set with text-decoration-line .

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.

If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like <del> or <s> . As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

句法

/* 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: Draws no line. Use text-decoration-line : none 代替。

形式定义

初始值	`solid`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	no
计算值	如指定
动画类型	discrete

形式句法

solid | double | dotted | dashed | wavy

范例

Setting a wavy underline

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

Results

规范

规范	状态	注释
CSS Text Decoration Module Level 3 The definition of 'text-decoration-style' in that specification.	候选推荐	Initial definition. The `text-decoration` property is now a shorthand to define multiple related properties.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`text-decoration-style`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 36 完整支持 36 不支持 6 — 39 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 12.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 36 完整支持 36 不支持 6 — 39 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 43	Safari iOS 完整支持 12.2	Samsung Internet Android 完整支持 7.0
`wavy`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 6	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 8	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 6	Opera Android 完整支持 43	Safari iOS 完整支持 8	Samsung Internet Android 完整支持 7.0

图例

完整支持
不支持
要求使用供应商前缀或不同名称。

另请参阅

When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

元数据

最后修改： Jul 21, 2020

CSS
CSS 参考
CSS Text Decoration
特性
1. text-decoration
2. text-decoration-color
3. text-decoration-line
4. text-decoration-skip
5. text-decoration-skip-ink
6. text-decoration-style
7. text-decoration-thickness
8. text-emphasis
9. text-emphasis-color
10. text-emphasis-position
11. text-emphasis-style
12. text-shadow
13. text-underline-offset
14. text-underline-position

在此页

句法

值