text-decoration

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.

* Some parts of this feature may have varying levels of support.

text-decoration CSS 简写属性设置文本上的装饰性线条的外观。它是 text-decoration-linetext-decoration-colortext-decoration-style 和较新的 text-decoration-thickness 属性的缩写。

尝试一下

文本装饰会覆盖子文本元素。这意味着如果一个元素指定了文本装饰,那么子元素无法去除这个装饰。例如,在标记 <p>这段文字中有<em>一些强调词</em>。</p> 中,样式规则 p { text-decoration: underline; } 会导致整个段落包含下划线。样式规则 em { text-decoration: none; } 不会有任何变化;整个段落仍然会包含下划线。但是,规则 em { text-decoration: overline; } 会导致“一些强调词”上出现上划线。

属性构成

语法

css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/* 全局值 */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

text-decoration 属性由一个或多个用空格分隔的值组成,表示各种普通文本装饰属性。

text-decoration-line

设置使用的装饰类型,例如 underlineline-through

text-decoration-color

设置装饰的颜色。

text-decoration-style

设置装饰的线条的样式,例如 solidwavydashed

text-decoration-thickness

设置装饰的线条粗细。

形式定义

初始值该简写所对应的每个属性:
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:

形式语法

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

<text-decoration-line> =
none |
[ underline || overline || line-through || blink ]

<text-decoration-style> =
solid |
double |
dotted |
dashed |
wavy

<text-decoration-color> =
<color>

示例

text-decoration 值的演示

css
.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;
}
html
<p class="under">此文本下方有一行线。</p>
<p class="over">此文本上面有一行线。</p>
<p class="line">此文本有一条线穿过它。</p>
<p><a class="plain" href="#">链接不会具有下划线</a
  >,因为链接默认加下划线。移除锚点上的文本装饰时要小心,因为用户通常依赖下划线来表示超链接
</p>
<p class="underover">此文本在其上方<em></em>下方都有线条。</p>
<p class="thick">在浏览器支持的情况下,此文本具有非常粗的紫色下划线。</p>
<p class="blink">此文本可能会为你闪烁,具体取决于你使用的浏览器。</p>

规范

Specification
CSS Text Decoration Module Level 3
# text-decoration-property
Scalable Vector Graphics (SVG) 2
# TextDecorationProperties

浏览器兼容性

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
text-decoration-color and text-decoration-style included in shorthand
text-decoration-thickness included in shorthand

Legend

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

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.

参见