【CSS】text-decoration属性的功能以及属性值

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

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

1. none: 默认值，表示没有装饰效果。文本将保持原样，不显示任何装饰。

   p {
     text-decoration: none;
   }
   

2. underline: 表示在文本下方添加一条下划线。这是最常见的装饰效果之一，常用于链接。

   a {
     text-decoration: underline;
   }
   

3. overline: 表示在文本上方添加一条上划线。

   span {
     text-decoration: overline;
   }
   

4. line-through: 表示在文本中间添加一条删除线。这通常用于表示已删除或不再适用的文本。

   del {
     text-decoration: line-through;
   }
   

5. wavy: 表示在文本下方添加一条波浪线。这是一种较为特殊的装饰效果，可以用于强调文本。

   strong {
     text-decoration: wavy underline;
   }
   

6. 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 值由于可能引起的可访问性问题，通常不建议使用。