关于text-decoration

关于text-decoration

作用：text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

text-decoration 属性是以下三种属性的简写：

1. text-decoration-line
2. text-decoration-color
3. text-decoration-style

1. text-decoration-line

• overline（上划线）
• line-through（删除线）
• underline（下划线）
• blink（不建议使用）
• inherit（继承）
• initial（默认值）
• unset
• none（当然这是最重要的）
  注：blink 定义闪烁的文本。但只有Firefox能用，所以不建议使用

2. text-decoration-color

3. text-decoration-style

只有设置了text-decoration-line才有效果

值	描述
solid	默认值。线条将显示为单线
double	线条将显示为双线。
dotted	线条将显示为点状线。
dashed	线条将显示为虚线。
wavy	线条将显示为波浪线。
initial	默认值
inherit	继承

4. 栗子：关键值和全局值

/*关键值*/
text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

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

5. 栗子：虚线与波浪线

h1 {
  text-decoration: underline overline dotted red;
}
 
h2 {
  text-decoration: underline overline wavy blue;
}