text-decoration

简介

text-decoration 这个 CSS 属性是用于设置文本排版(下划线、顶划线、删除线或者闪烁)。下划线和顶划线修饰于文本的下部,删除线位于文本之上。

文本修饰属性会延伸到后代元素。这意味着如果祖先元素指定了文本修饰属性,后代元素则不能将其删除。例如,在如下标记中<p>This text has <em>some emphasized words</em> in it.</p>,应用样式p { text-decoration: underline } 会对整个段落添加下划线,再添加样式 em { text-decoration: none } 则不会引起任何改变;整个段落仍然有下划线修饰。然而,新加样式 em { text-decoration: overline } 则会在<em>标记的文字上添加另一种新样式。

语法

text-decoration属性是一种简写属性,并且可以使用普通属性三个值中的任何一个。普通属性如下:text-decoration-linetext-decoration-colortext-decoration-style

text-decoration-line
文本修饰的位置, 如下划线underline,删除线line-through
text-decoration-color
文本修饰的颜色
text-decoration-style
文本修饰的样式, 如波浪线wavy实线solid虚线dashed

语法形式

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

示例

<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="blink">This text might blink for you,
    depending on the browser you use.</p>
.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;
}

.blink {
  text-decoration: blink;
}

结果

规范

规范 状态值 注解
CSS Text Decoration Module Level 3
text-decoration
Candidate Recommendation 转换为简写属性。支持text-decoration-style
CSS Level 2 (Revision 1)
text-decoration
Recommendation 没有显著变化
CSS Level 1
text-decoration
Recommendation

最初的规范

初始值as each of the properties of the shorthand:
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decorationChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
blink
Deprecated
Chrome No support NoEdge No support NoFirefox No support 1 — 23IE No support NoOpera No support 4 — 15Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 23Opera Android No support 10.1 — 14Safari iOS No support NoSamsung Internet Android Full support 7.0
ShorthandChrome Full support 57Edge No support NoFirefox Full support 36
Full support 36
Partial support 6
IE No support NoOpera Full support 44Safari Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 36
Full support 36
Partial support 6
Opera Android Full support 43Safari iOS Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见