他们说好东西会留给等待的人，当谈到网络上的文字装饰时，事实证明这是非常正确的。在CSS文本装饰模块3级定义了Web上的一些伟大的新的方法来装饰文本，浏览器终于开始对他们有很好的支持。使用border-bottom代替适当的文本下划线以获得不同的下划线颜色的时代可能最终会过去。

结果可能会有所不同：支持仍然有限，因此本文中的示例可能无法正确显示，具体取决于您使用的浏览器。

文字装饰

该文本装饰用财产只有约值之间的选择无，下划线，上划线和线路通过，但随着新的建议是将成为新的简写文本的装饰色，文字装饰风格和文本- 装饰线属性。例如，这是一个彩色双下划线：

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

花式下划线

文字装饰颜色

就像你想象的那样工作。终于有办法改变文字装饰颜色了！

文字装饰风格

text-decoration-style用于定义文本装饰的类型，新推荐带来两个新值：double和wavy：

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

波浪形装饰

文字装饰线

text-decoration-line接受underline、overline、line-through和blink 的值（但是不推荐使用blink ）：

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

罢工这个

文字装饰跳过

使用text-decoration-skip我们可以避免在其应用的元素的部分上进行装饰步骤。可能的值是objects，spaces，ink，edges和box-decoration。

• ink：最后，一种防止文本装饰重叠字形下行的方法：

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

河马

---

• objects：文本修饰会跳过显示inline-block 的元素。它也是初始值：

<p class="super">
  Getting <span style="display: inline-block;">Very</span> Fancy
</p>

.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

得到 非常 想要

---

其余的值还没有被浏览器很好地支持：

• 空格：装饰跳过空格和标点符号。
• edge：当两个带有文本装饰的元素彼此相邻时创建一个间隙。
• box-decoration：装饰跳过任何继承的边距、填充或边框。

文本下划线位置

使用text-underline-position我们还有另一种方法来控制与字形相关的文本装饰的定位。可能的值为auto、under、left和right。

使用初始值auto，浏览器通常会将装饰放置在靠近文本基线的位置：

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

河马

……现在请注意，使用under，装饰是如何放置在文本降序之后的：

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

河马

text-underline-position的left和right值用于控制垂直书写模式下的文本修饰。

现在继续用一些花哨的文字装饰给我们留下深刻印象！

浏览器支持：截至 2020 年，我可以使用文本装饰吗？表明全球 94% 的浏览器至少部分支持该属性。