text-decoration 是 CSS 中的一个属性,用于添加或删除文本的装饰效果。它主要应用于文本元素,如段落、标题等,以改变其外观。text-decoration 属性的主要功能包括下划线、删除线和上划线等效果。

text-decoration 属性有以下几个常用值:

  1. none: 默认值,表示没有装饰效果。文本将保持原样,不显示任何装饰。
p {
  text-decoration: none;
}
  1. underline: 表示在文本下方添加一条下划线。这是最常见的装饰效果之一,常用于链接。
a {
  text-decoration: underline;
}
  1. overline: 表示在文本上方添加一条上划线。
span {
  text-decoration: overline;
}
  1. line-through: 表示在文本中间添加一条删除线。这通常用于表示已删除或不再适用的文本。
del {
  text-decoration: line-through;
}
  1. wavy: 表示在文本下方添加一条波浪线。这是一种较为特殊的装饰效果,可以用于强调文本。
strong {
  text-decoration: wavy underline;
}
  1. blink: 表示使文本闪烁。但请注意,这个效果在不同浏览器中的支持程度不同,且可能对用户体验产生负面影响,因此不建议使用。
.blink {
  text-decoration: blink;
}

此外,text-decoration 属性还可以设置为继承父元素的装饰效果:

p {
  text-decoration: underline;
}

span {
  text-decoration: inherit; /* 该 span 将继承父元素的 text-decoration 属性值 */
}

通过组合这些属性值,可以实现更复杂的文本装饰效果。例如,同时使用下划线和删除线:

.double-line {
  text-decoration: underline line-through;
}

使用 text-decoration 属性时,要注意其可能对可访问性产生的影响。例如,使用 line-through 来表示已删除或不再有效的文本是合适的,但随意使用它可能会导致混淆。同样,blink 值由于可能引起的可访问性问题,通常不建议使用。