文本修饰 | text-decoration

text-decoration CSS属性指定文本所使用的装饰线条的外观。它是在单个声明中设置一个或更多个文字修饰值的简写形式，这些文字修饰值包括：text-decoration-line，text-decoration-color和text-decoration-style。

/* Keyword values */
text-decoration: none;                /* No text decoration */
text-decoration: underline red;       /* Red underlining */
text-decoration: underline wavy red;  /* Red wavy underlining */

/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

文字装饰是会传递到后代节点中的。这意味着如果一个元素指定了一个文本修饰方式，那么它的子元素则不能删除该修饰。例如，在标记<p>This text has <em>some emphasized words</em> in it.</p>中，样式规则p { text-decoration: underline; }会导致整个段落被加下划线。样式规则em { text-decoration: none; }不会导致任何改变，整个段落仍然会被强调。但是，这个规则em { text-decoration: overline; }会导致第二个装饰出现在“一些强调的语句”上。

• text-decoration-color:currentcolor

• text-decoration-style: solid

• text-decoration-line: none

Applies to all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line).   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• text-decoration-line： 指定值

• text-decoration-style：指定值

• text-decoration-color：颜色数值

动画类型作为简写的每个属性：

• text-decoration-color：一种颜色

• text-decoration-style：discrete

• text-decoration-line：discrete

出现在规则语法中的规范顺序 

语法

该text-decoration属性的赋值为以一个或多个以空格分隔的各种文本修饰属性值。

可能值

text-decoration-line设置使用的装饰种类，如underline或line-through。

text-decoration-color设置装饰的颜色。

text-decoration-style设置用于装饰的线条的风格，比如solid，wavy或dashed。

形式语法

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

实例

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

<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 with 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>

规范

浏览器兼容性