Page 160 - css揭秘

26 自定义下划线

背景知识
CSS 渐变，background-sizetext-shadow，“条纹背景”

难题

设计师都是强迫症患者。这群人总是不遗余力地打磨每一处样式，小心
翼翼地调整每一个细节，从而无限逼近内心的完美幻象，力求整个设计更加
符合直觉、易于使用。他们很少拿了默认值就用。
文本的下划线就是一件让设计师们乐此不疲反复折腾的事情。尽管默认
样式很实用，但往往太过扎眼，更不要提在不同浏览器下的渲染效果大相径
庭。尽管文本下划线从 Web 诞生之初就已经存在，但我们其实并没有太多
办法对它进行自定义。哪怕是在 CSS 降临之后，也只给了我们一个简单的
开关：

text-decoration: underline;

跟往常一样，如果手里缺少想要的工具，我们就会想尽办法七拼八凑。
我们没有办法直接定义文本下划线的样式，就会很自然地打起边框的主意。
用边框来模拟下划线，大概是我们最早想出来的 CSS 小把戏之一了：

a[href] {
border-bottom: 1px solid gray;
text-decoration: none;
}

尽管用 border-bottom 模拟出来的文本下划线给予了我们对颜色、线
宽、线型的控制能力，但它并不完美。我们在图 5-22 中可以看出，这些
“下划线”跟文本之间的空隙很大，位置甚至比字形的降部（descender）还
要低！我们可以试着修复这个问题，将这个链接的 display 属性设置为
inline-block，再指定一个稍小的 line-height，就像这样： 图 5-22
用 border-bottom 模拟出来的假
display: inline-block;
border-bottom: 1px solid gray; 下划线
line-height: .9;

26 自定义下划线 129

඀ࠡ JOEC