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: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;

浏览器支持

浏览器都支持text-decoration

语法:

text-decoration:text-decoration-line||text-decoration-style||text-decoration-color||text-decoration-thickness

取值:

• text-decoration-line:指定文本装饰的种类。相当于CSS2.1的text-decoration属性，可取值:none | underline | overline | line-through | blink
• text-decoration-style:指定文本装饰的样式。如波浪线wavy、实线solid、虚线dashed
• text-decoration-color:指定文本装饰的颜色。
• text-decoration-thickness:文本修饰线的粗细（CSS4新增加注意这个属性还不是正式的，还没有明确。）

说明:

复合属性。检索或设置对象中的文本的装饰。

• 所有浏览器均支持CSS2.1中的text-decoration属性，在CSS3中，该属性定义被移植到其新的分解属性text-decoration-line上；
• 相关属性:text-decoration-skip||text-underline-position
• 对应的脚本特性为textDecoration。

例子

h1{text-decoration:overline}
h2{text-decoration:line-through}
h3{text-decoration:underline}

<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;
}