更多文本装饰控制

Marie Mosley 刚刚完成了对年鉴中 text-decoration 属性（及其朋友）的改进。 您可能已经了解了这个属性。 例如，大多数默认浏览器样式通过 text-decoration: underline; 包含带下划线的链接 - 您也可以使用 text-decoration: none; 将其删除。

但是您可能没有意识到，您可以使用此属性做更多的事情，以及各种子属性提供更精细的控制。

文本可以有多个装饰

像

a {
  text-decoration: underline overline;
}

查看年鉴中的 text-decoration 条目。 更准确地说，这是在 text-decoration-line 子属性中添加多个值。

您可以更改装饰的颜色

装饰线的默认颜色与文本的 color 相同。 但是您可以更改它

a {
  text-decoration-color: #f06d06;
}

查看年鉴中的 text-decoration-color 条目。

注意 Gecko 在降部下方渲染下划线，而 WebKit/Blink 在上方渲染

处理彩色下划线的一种常见方法通常是使用 border 而不是 text-decoration。 边框可以单独控制颜色、厚度和位置，比 text-decoration 能更好地完成。

但有一些事情是边框做不到的，例如…

您可以更改装饰的样式

无法让边框做到这一点！

a {
  text-decoration-style: wavy;
}

查看年鉴中的 text-decoration-style 条目。

它将变得更加花哨

对于更好的带下划线文本，一直存在着 明确的需求。 例如，如该文章中所述，为了更好的可读性，跳过降部

这将由 text-decoration-skip 控制，但尚未在任何地方实现。 同时，将下划线设置为更宽松、对比度更低的颜色可能会有所帮助。 以下是 rgba() 的使用示例

跳过降部只是它可能具有的一个功能。 您将能够跳过某些内联元素、空格并控制边缘。

注意 Safari/iOS 似乎默认跳过降部。

如果您想关闭它，-webkit-text-decoration-skip: none; 有效。

游乐场

由于 浏览器支持 的差异，此演示中的部分（或全部）可能无法在您的浏览器中运行。

查看 CodePen 上 CSS-Tricks 的 Pen text-decoration-style (@css-tricks)。

---

所以是的！ 即使是像这样的简单东西（我们有时认为理所当然），也会随着时间的推移在 CSS 世界中发生变化。