text-decoration

简介

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线  或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。例如，在如下标记中 <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>标记的文字上再添加上这种overline样式。

语法

text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：text-decoration-line，text-decoration-color和text-decoration-style

值

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

语法形式

示例

<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 4 Working Draft 增加了 text-decoration-thickness; 注意这个属性还不是正式的，还没有明确。
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.
是否是继承属性否
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

浏览器兼容性

BCD tables only load in the browser

参见