详解CSS 文字装饰 text-decoration & text-emphasis

text-decoration

text-decoration 属性是用来为文本添加各种文字装饰的。它可以接受以下值：

• none：默认值，不添加任何装饰。
• underline：在文本下方添加一条线。
• overline：在文本上方添加一条线。
• line-through：在文本中间添加一条线。
• blink：让文本闪烁。不建议使用，因为容易让人眼花。

示例：

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: overline;
}

p {
  text-decoration: line-through;
}

以上代码将为 <h1> 元素添加下划线、为 <h2> 元素添加上划线、为 <p> 元素添加删除线。

还可以使用 color 属性为装饰添加颜色：

a {
  text-decoration: underline;
  color: blue;
}

text-emphasis

text-emphasis 属性用于为文本添加强调效果，它可以接受以下值：

• none：默认值，不添加任何强调效果。
• dot：用圆点强调文本。
• circle：用圆圈强调文本。
• double-circle：用双圆圈强调文本。
• triangle：用三角形强调文本。
• sesame：用芝麻强调文本。

示例：

p {
  text-emphasis: dot;
}

span {
  text-emphasis: circle;
}

a {
  text-emphasis: triangle;
}

以上代码将为 <p> 元素使用圆点强调、为 <span> 元素使用圆圈强调、为超链接 <a> 添加三角形强调效果。

CSS 文字装饰和强调效果可以用来美化页面、突出重点、增强可读性。我们可以根据具体需求选择适合的效果进行设置。