用background-image来做自定义下划线

用background-image来做自定义下划线

 2016-10-06 08:14    网页设计   标签：css   979    发表评论

文本的下划线是一件让webdesigner乐此不彼反复折腾的事情。尽管默认样式很适用，但往往太过扎眼，更不要说在不同浏览器下的渲染效果大相径庭。尽管文本下划线从Web诞生之初就已近存在，但我们其实并没有太多办法对它进行自定义。哪怕是在CSS降临之后，也只给了我们一个简单的开关：

text-decoration:underline;

我们一直采用的是边框来模拟下划线，大概是我们最早想出来的CSS小把戏之一了：

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

the only way to get rid of a temptation is to yield to it

尽管用了border-bottom模拟出来的文本下划线给予我们颜色、线宽、线型的控制能力，但它并不完美。可以看到，这些“下划线”与本文之间的空隙很大，位置甚至比字形的降部还要低。为了修复这个问题，我们将这个链接的display属性设置为inline-block，再指定一个稍小的line-height，就像这样：

display:inline-block;
border-bottom:1px solid gray;
line-height:.9;

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

box-shadow: -1px gray inset;

不过，这方法存在与border-bottom一样的问题，只不过它显示出来的下划线离文本稍微近一些。

用background-image来做下划线

最佳方案往往是我们觉得最不可思议的地方。背景可以完美的跟随换行的文本，而且借助CSS背景与边框中与背景相关的新属性，我们已经拥有了细粒度控制背景的能力。我们甚至不需要用额外的HTTP请求来加载背景图片，因为我们可以通过CSS渐变来凭空生成所需的图像：

background:linear-gradient(gray,gray) no-repeat;
background-size:100% 1px;
background-position:0 1.15em;

the only way to get rid of a temptation is to yield to it

这样看起来就好多了，不过，我们仍有一点改善的空间。

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

background:linear-gradient(gray,gray) no-repeat;
background-size:100% 1px;
background-position:0 1.15em;
text-shadow:-.05em 0 white,-.05em 0 white;

the only way to get rid of a temptation is to yield to it

使用渐变色来实现下划线的高明之处在于，这些线条极为灵活。举例来说，如果要生成一条虚线下划线，可以这样做：

background:linear-gradient(90deg,gray 66%,transparent 0) repeat-x;
background-size:.2em 23px;
background-position:0 1em;

the only way to get rid of a temptation is to yield to it

然后就可以通过色标的百分比位置值来微调虚线比例，通过background-size还可以来改变虚线的疏密。