此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2015年7月.
* Some parts of this feature may have varying levels of support.
text-decorationCSS简写属性设置文本上的装饰性线条的外观。它是text-decoration-line、text-decoration-color、text-decoration-style 和较新的text-decoration-thickness 属性的缩写。
尝试一下
text-decoration: underline;text-decoration: underline dotted;text-decoration: underline dotted red;text-decoration: green wavy underline;text-decoration: underline overline #ff3028;<section> <p> I'd far rather be <span>happy than right</span> any day. </p></section>p { font: 1.5em sans-serif;}文本装饰会覆盖子文本元素。这意味着如果一个元素指定了文本装饰，那么子元素无法去除这个装饰。例如，在标记<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设置使用的装饰类型，例如
underline或line-through。text-decoration-color设置装饰的颜色。
text-decoration-style设置装饰的线条的样式，例如
solid、wavy或dashed。text-decoration-thickness设置装饰的线条粗细。
形式定义
| 初始值 | 该简写所对应的每个属性：
|
|---|---|
| 适用元素 | 所有元素. It also applies to::first-letter and::first-line. |
| 是否是继承属性 | 否 |
| 计算值 | 该简写所对应的每个属性：
|
| 动画类型 | 该简写所对应的每个属性： |
形式语法
text-decoration =
<'text-decoration-line'>||
<'text-decoration-thickness'>||
<'text-decoration-style'>||
<'text-decoration-color'>
<text-decoration-line> =
none|
[underline||overline||line-through||blink]|
spelling-error|
grammar-error
<text-decoration-thickness> =
auto|
from-font|
<length-percentage>
<text-decoration-style> =
solid|
double|
dotted|
dashed|
wavy
<text-decoration-color> =
<color>
<length-percentage> =
<length>|
<percentage>
示例
text-decoration 值的演示
.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>此文本下方有一行线。</p><p>此文本上面有一行线。</p><p>此文本有一条线穿过它。</p><p> 此<a href="#">链接不会具有下划线</a >，因为链接默认加下划线。移除锚点上的文本装饰时要小心，因为用户通常依赖下划线来表示超链接</p><p>此文本在其上方<em>和</em>下方都有线条。</p><p>在浏览器支持的情况下，此文本具有非常粗的紫色下划线。</p><p>此文本可能会为你闪烁，具体取决于你使用的浏览器。</p>规范
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |
浏览器兼容性
参见
- 包括的文本装饰属性分别是
text-decoration-line、text-decoration-color、text-decoration-style和text-decoration-thickness。 text-decoration-skip-ink、text-underline-offset和text-underline-position属性也会影响文本装饰，但不包括在该简写属性中。list-style属性控制<ol>和<ul>列表的每一项的外观。