时间：2021-07-01 10:21:17 帮助过：46人阅读
设计师是很挑剔的一群人。我们总是很喜欢自定义一些东西，然后精心设计一番，使得它们和我们想要的视觉效果非常相近，让我们的设计更直观也更易于使用。毕竟，默认的东西很少有我们觉得不错的。
文本下划线就是我们非常喜欢去自定义的东西之一。尽管默认的用起来不错，可是给人一种干扰的感觉，况且它在每一个浏览器中渲染的结果都不一样。尽管文本下划线从web开始普及以来，一直伴随着我们，我们从来没有真正找到更多自定义它们的方式。甚至在CSS到来之后，我们也只是有了一个on/off的权限：
text-decoration: underline;
和之前一样，如果我们没有正好对口的工具，我们就需要自行解决了。我们没有办法自定义文本下划线，所以我们需要用 border 来伪造。所以第一个想到的CSS技巧：
a[href] { border-bottom: 1px solid gray; text-decoration: none;} 虽然使用 border-bottom 来模拟文本下划线可以让我们控制颜色、粗线还有样式，但这不是完美的。你可以在下图中看到
这些“下划线”和文本内容之间有一个非常大的空隙，差不多就像是在文本的下一行的位置！我们可以尝试通过给它一个 display: inline-block; 以及一个较小的 line-height 值来解决这个问题，如下：
display: inline-block;border-bottom: 1px solid gray;line-height: .9;
这确实可以让下划线离文本更近，但是它影响了正常的文本换行，如图所示。
尝试解决基于border的“下划线”的问题，但是文本需要换行——这样反而乱套了
现在，我们再来尝试使用内阴影 box-shadow 来模拟下划线：
box-shadow: 0 -1px gray inset;
但是，这和 border-bottom 有相同的问题，除了它的投影稍微和文本更靠近了一些。有没有什么办法可以得到确定的、灵活的、可自定义的下划线呢？
最好的解决方案往往来自最意想不到的地方。在这个示例中，它涉及 background-image 和其相关属性的作用。你可能会觉得疯狂，但是请先等一下。背景可以非常完美地包裹文本，再根据CSS3 Backgrounds & Borders中一些新的背景相关的属性，如 background-size ，我们可以对它们有一个非常精确的控制。我们甚至不需要为它们添加单独的HTTP请求，因为我们可以通过CSS渐变生成背景图像：
background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.15em;
你可以在下图中看到非常不错的效果。
但是我们还可以做一个小的提升。注意到我们的下划线是如何穿过一些像 p 和 y 这样的字母的吗。如果在它们周围有一些适当的空白，岂不是更好吗？如果我们的背景是纯色的，我们可以设置两个 text-shadows ，其中一个阴影的颜色和我们的背景颜色一样：
background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.15em;text-shadow: .05em 0 white, -.05em 0 white;
效果如下所示：
在这里使用渐变是因为它们非常灵活。例如，创建一个虚下划线，你可以这样写：
background: linear-gradient(90deg,gray 66%, transparent 0) repeat-x;background-size: .2em 2px;background-position: 0 1em;
效果如下图所示：
这样你可以通过色标来控制虚线的间隙，通过 background-size 来控制它们的尺寸。
作为练习，你可以尝试创建红色波浪下划线，如用于强调拼写错误的那个下划线样式（提示：你需要两个渐变。）你会在下面的示例中找到解决方案，但是在看答案之前，自己先试试——这样会更有趣。
在将来，我们要自定义下划线就不需要再这么繁琐了。在 CSS3 Text Decoration 中，有几个为此定制的属性，如下：
但是，这些属性目前的浏览器支持非常少。