CSS 文本装饰

CSS 文本装饰模块定义了与文本装饰相关的特性，例如下划线、文本阴影和着重号。文本装饰特性可以为拼写错误、语法问题和链接提供视觉提示。这些特性有助于提高文本的可用性、可访问性、功能性和美观性。

通过使用伪类和伪元素来改变文本装饰的颜色、样式和粗细，你可以用不单纯依赖颜色的方式来强调文本。

有几个特性可以帮助改善文本的可读性

text-decoration-skip-ink 可以通过跳过下伸部分来提高易读性。
text-underline-offset 允许你微调下划线的位置，以更好地匹配字体指标或设计美学，这对于独特的字体尤其有用。
text-shadow 的颜色与文本color形成对比时，当放置在对比度不足的背景上时，可以使文本在视觉上突出。

所有这些特性都有助于提高易读性，从而提高可访问性。减少视觉干扰和提高文本清晰度对于患有阅读障碍或弱视的用户尤其有帮助。

在某些语言的书写系统中，上划线和下划线具有语义意义。CSS 允许你根据文化规范调整样式。文本装饰特性对于不使用拉丁字母脚本，而是遵循不同下划线位置（例如日语和韩语）的语言尤其有用。

文本装饰特性还使你能够遵循来自印刷媒体的编辑和本地化标准。例如，通过删除线（line-through），你可以指示内容的状态。用它来告知用户内容已被删除或价格已减半。此特性允许你同时呈现原始内容和更新后的内容。上划线或双下划线通常用于学术和编辑注释。

文本装饰实战

p {
  margin: 1em 0;
}
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

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

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
  text-underline-offset: -5px;
}
.shadow {
  text-shadow: red 4px 4px 0;
}
.emphasis {
  text-emphasis: triangle red;
}

<p class="under">A red underline</p>
<p class="over">A wavy lime overlines</p>
<p class="line">This has a line-through it</p>
<p class="underover">This has a dashed underline and overline</p>
<p class="thick">An offset solid purple underline</p>
<p class="shadow">This has a red shadow</p>
<p class="emphasis">Emphasized with red triangles</p>