当前位置：首页 > news >正文

text-decoration 使用

news 2025/8/12 0:44:18

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