text-decoration

在此页

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

text-decoration 简写 CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and the newer text-decoration-thickness 特性。

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.

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration. For example, in the markup <p>This text has <em>some emphasized words</em> in it.</p> , the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. The style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. However, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words".

组成特性

此特性是下列 CSS 特性的简写：

句法

text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.

值

text-decoration-line: Sets the kind of decoration used, such as underline or line-through .
text-decoration-color
text-decoration-style: Sets the style of the line used for the decoration, such as solid , wavy ，或 dashed .
text-decoration-thickness

形式定义

初始值	as each of the properties of the shorthand: `text-decoration-color` : `currentcolor` `text-decoration-style` : `solid` `text-decoration-line` : `none`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	no
计算值	as each of the properties of the shorthand: `text-decoration-line` ：如指定 `text-decoration-style` ：如指定 `text-decoration-color` ：计算颜色 `text-decoration-thickness` ：如指定
动画类型	as each of the properties of the shorthand: `text-decoration-color` : a color `text-decoration-style` : discrete `text-decoration-line` : discrete `text-decoration-thickness` : by computed value type

形式句法

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>

范例

Demonstration of text-decoration values

.under {
  text-decoration: underline red;
}
.over {
  text-decoration: wavy overline lime;
}
.line {
  text-decoration: line-through;
}
.plain {
  text-decoration: none;
}
.underover {
  text-decoration: dashed underline overline;
}
.thick {
  text-decoration: solid underline purple 4px;
}
.blink {
  text-decoration: blink;
}

<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
    as links generally are by default. Be careful when removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.</p>

规范

规范	状态	注释
CSS Text Decoration Module Level 4	工作草案	添加 `text-decoration-thickness` ; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
CSS Text Decoration Module Level 3 The definition of 'text-decoration' in that specification.	候选推荐	Transformed into a shorthand property. Added support for the value of `text-decoration-style` .
CSS Level 2 (Revision 1) The definition of 'text-decoration' in that specification.	推荐	No significant changes.
CSS Level 1 The definition of 'text-decoration' in that specification.	推荐	初始定义。

浏览器兼容性

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`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 3	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
`blink` 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 1 — 23	IE 不支持 No	Opera 不支持 4 — 15	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 4 — 23	Opera Android 不支持 10.1 — 14	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
Shorthand	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 36 完整支持 36 部分支持 6	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 8 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 36 完整支持 36 部分支持 6	Opera Android 完整支持 43	Safari iOS 完整支持 8 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android 完整支持 7.0
`text-decoration-thickness` included in shorthand Experimental 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 70	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
要求使用供应商前缀或不同名称。

另请参阅

The individual text-decoration properties are text-decoration-line , text-decoration-color ，和 text-decoration-style .
list-style attribute controls the appearance of items in HTML <ol> and <ul> lists.

元数据

最后修改： Oct 15, 2020

在此页