WebKit的文本装饰艺术：CSS Text Decoration全解析

CSS Text Decoration是一种样式属性，用于设置文本的装饰样式，如下划线、上划线、删除线等。

CSS Text Decoration属性的常用值有：

1. none：默认值，表示没有文本装饰。
2. underline：定义文本下的一条线。
3. overline：定义文本上的一条线。
4. line-through：定义文本中间的一条线，通常用于表示删除。
5. inherit：从父元素继承text-decoration属性的值。

CSS Text Decoration Line属性的常用值有：

1. solid：实线装饰。
2. double：双线装饰。
3. dotted：点线装饰。
4. dashed：虚线装饰。
5. wavy：波浪线装饰。

CSS Text Decoration Color和CSS Text Decoration Style属性可以分别设置文本装饰的颜色和样式。

示例代码：

/* 为所有段落文本添加下划线 */
p {
  text-decoration: underline;
}
 
/* 为特定类名的元素添加上划线和删除线 */
.decorated {
  text-decoration: overline line-through;
}
 
/* 为特定类名的元素添加波浪线装饰 */
.wavy-decoration {
  text-decoration: 2px wavy red;
}
 
/* 继承父元素的文本装饰 */
.inherited-text-decoration {
  text-decoration: inherit;
}

在HTML中使用这些样式：

<p>This is a paragraph with underline.</p>
<div class="decorated">This text is overlined and line-through.</div>
<div class="wavy-decoration">This text has a custom wavy underline.</div>
<div class="inherited-text-decoration">This text inherits the parent's text decoration.</div>

以上代码演示了如何使用CSS为文本添加不同的装饰，并可以通过设置颜色和样式来自定义装饰的外观。