text-decoration 使用

text-decoration

text-decoration 用于设置文本上的装饰性线条的外观。

它是 text-decoration-line、text-decoration-style、text-decoration-color 和text-decoration-thickness的缩写。

text-decoration: underline wavy red;

text-decoration-line 设置文本装饰类型

可以设置为none，或者多个下列的值。

• none： 没有装饰效果，默认值
• underline： 文本下方有一条装饰线
• overline：文本上方有装饰线
• line-through：有一条贯穿文本中间的修饰线

text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */

text-decoration-style 设置线的样式

• solid： 实线
• double： 双实线
• dotted：点线
• dashed： 虚线
• wavy：波浪线

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

text-decoration-color 设置修饰线的颜色

默认值为当前文本的颜色

/* Initial value */
text-emphasis-color: currentcolor;

/* <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;

text-decoration-thickness 文本装饰线厚度 (粗细)

• auto: 由浏览器为文本装饰线选择合适的厚度
• from-font: 如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值。如果字体文件中没有包含首选的厚度值，则效果和设置为 auto 一样，由浏览器选择合适的厚度值
• <length>: 将文本装饰线的厚度设置为一个值，覆盖掉字体文件建议的值或浏览器默认的值。
• <percentage>: 将文本装饰线的粗细指定为当前字体中 1em 的 <百分比>。 百分比作为相对值继承，因此会随着字体的变化而缩放。 浏览器必须至少使用 1 个设备像素。 对于此属性的给定应用程序，即使存在具有不同字体大小的子元素，其所应用的整个框的厚度也是恒定的。

text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* percentage */
text-decoration-thickness: 10%;