Page 161 - css揭秘

这个方法确实可以让下划线向文本贴近，但同时会阻止正常的文本换行
行为，如图 5-23 所示。眼下，我们还可以尝试运用一层内嵌的 box-shadow
来模拟下划线的效果：

box-shadow: 0 -1px gray inset;
图 5-23
不过，这个方法存在与 border-bottom 一样的问题，只不过它显示出
表面上修复了假下划线存在的问
①
题，但遇到文本换行的情况时， 来的下划线离文本稍近一些 。还有没有其他办法可以产生即美观又灵活，
1
灾难降临 而且可以定制各种样式的下划线呢？
解决方案

最佳的解决方案往往出自最意想不到的地方。在这个例子中，最佳方案
来自于 background-image 及其相关属性。你可能会觉得这完全不可思议，
但请容我慢慢道来。背景可以完美地跟随换行的文本，而且借助 CSS 背景
与边框（第三版）中与背景相关的新属性，我们已经拥有了细粒度控制背景
图 5-24 的能力。我们甚至不需要用到额外的 HTTP 请求来加载背景图片，因为可以
通过 CSS 渐变精心打造的自定义 通过 CSS 渐变来凭空生成所需的图像：
下划线
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;

你可以在图 5-24 中看到它的效果多么优雅和柔和。不过，我们仍然有
一点改进的空间。

请注意下划线会穿过某些字母（比如 p 和 y）的降部。如果下划线在遇
到字母时会自动断开避让，那效果看起来岂不是更好？假如背景是一片实
色，就可以设置两层与背景色相同的 text-shadow 来模拟这种效果（参见
图 5-25）：

background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
图 5-25 background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;
增加 text-shadow 来防止下划线
穿过文本的降部
使用渐变来实现下划线的高明之处在于，这些线条极为灵活。举例来
说，如果要生成一条虚线下划线（参见图 5-26），可以这样做：

background: linear-gradient(90deg,
gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
background-position: 0 1em;
图 5-26
通过 CSS 渐变还可以充分自定义 ① 到底近多少？只不过是近了线宽那么大的距离，因为这个方法唯一的区别在于线条是绘制在
下划线的线型 padding box 内部的。

130 第 5 章 字体排印

඀ࠡ JOEC