他们说 好东西会降临到那些等待的人身上 ，这在网络上的文本装饰方面是非常正确的。CSS Text Decoration Module Level 3定义了一些很棒的新方法来装饰Web上的文本，浏览器终于开始对它们提供良好的支持。为了获得不同的下划线颜色而使用边框底部而不是适当的文本下划线的时代可能最终会过去。
<$>[警告]结果可能会有所不同： 支持仍然有限，因此本文中的示例可能无法正确显示，具体取决于您使用的浏览器。<$>
文字装饰
text-decoration属性过去只是在none、underline、overline和line-through值之间进行选择，但随着新的建议，它变成了新的text-decoration-color、text-decoration-style和text-decoration-line属性的简写。例如，这里有一个彩色双下划线：
1.fancy {
2 -webkit-text-decoration: hotpink double underline;
3 text-decoration: hotpink double underline;
4}
Fancy Underline
text-decoration-color
就像你想象的那样工作。最后给出一种改变文字装饰颜色的方法！
文字装饰风格
文本装饰风格用于定义文本装饰的类型，新推荐带来了两个新值：Double和Wavy：
1.wavy {
2 text-decoration: underline;
3 -webkit-text-decoration-color: salmon;
4 text-decoration-color: salmon;
5 -webkit-text-decoration-style: wavy;
6 text-decoration-style: wavy;
7}
Wavy Decoration
文字装饰行
文本装饰-行接受下划线、上划线、划线和闪烁的值(但不推荐使用闪烁)：
1.strike {
2 -webkit-text-decoration-color: red;
3 text-decoration-color: red;
4 -webkit-text-decoration-line: line-through;
5 text-decoration-line: line-through;
6}
Strike This
文本-装饰-跳过
使用文本修饰跳过，我们可以避免在其所应用的元素的部分上进行修饰。可能的值包括对象、空间、墨迹、边缘和方框装饰。
- ink：最后，一种防止文字装饰重叠字形下沉的方法：
1.ink {
2 -webkit-text-decoration: darkturquoise solid underline;
3 text-decoration: darkturquoise solid underline;
4 -webkit-text-decoration-skip: ink;
5 text-decoration-skip: ink;
6}
Hippopotamus
- 对象：文本装饰跳过具有内联块显示的元素。它也是初始值：
1<p class="super">
2 Getting <span style="display: inline-block;">Very</span> Fancy
3</p>
1.super {
2 -webkit-text-decoration: peru solid overline;
3 text-decoration: peru solid overline;
4 -webkit-text-decoration-skip: objects;
5 text-decoration-skip: objects;
6}
Getting Very Fancy
浏览器还不能很好地支持剩余的值：
- 空格：装饰跳过空格和标点符号。
- 边：当两个具有文本装饰的元素相邻时创建间隙。
- 框装饰：装饰跳过任何继承的边距、填充或边框。
文本-下划线-位置
使用文本下划线位置，我们还有另一种方法来控制文本修饰相对于字形的位置。可能的值有AUTO、DOWN、LEFT和RIGHT。
对于初始值 的AUTO，浏览器通常会将装饰放置在靠近文本基线的位置：
1.auto {
2 -webkit-text-decoration: slateblue solid underline;
3 text-decoration: slateblue solid underline;
4 -webkit-text-underline-position: auto;
5 text-underline-position: auto;
6}
Hippopotamus
...现在请注意，使用Under时，装饰是如何放置在文本降序之后的：
1.under {
2 -webkit-text-decoration: slateblue solid underline;
3 text-decoration: slateblue solid underline;
4 -webkit-text-underline-position: under;
5 text-underline-position: under;
6}
Hippopotamus
文本-下划线-位置 的左右两个值用于控制垂直书写模式下的文本装饰。
现在继续用一些花哨的文字装饰来打动我们吧！
<$>[信息] 浏览器支持： 截至2020年，Can I Use text-decoration？]显示，全球94%的浏览器至少部分支持该属性。 <$>