【文本】自定义下划线

为文本添加下划线，在CSS降临之前，就有一个简单的方法：

text-decoration: underline;

默认下划线

这个方法虽然方便，但是我们却没有办法给下划线添加样式。

1. 于是，我们就会想办法，用边框来制作下划线：

border-bottom: 1px solid #000;

虽然我们可以给这个下划线添加颜色、线宽、线型的控制力，但它依旧不完美。“下划线”与文本之间的空隙很大，修复这个问题的话，我们可以把这个链接的 display 设置为 inline-block，再指定一个稍小的 line-height ：

  display:inline-block;
  line-height:.85em;

但是，这时候也出现了一个问题：文本换行时，怎么办！？
所以这个方案时不OK的！！

2. box-shadow

  box-shadow:0 -1px gray inset;

box-shadow 也能做出下划线的效果，不过这个方法存在与 border-bottom 一样的问题，只不过它显示出来的下划线离文本稍近一些。（到底近了多少？只不过近了线宽那么大的距离，因为这个方法唯一的区别在于线条是绘制在 padding box 内部的。）

3. 利用 background-image 渐变属性，制作下划线。

背景可以完美地跟随换行的文本，甚至不需要用到额外的HTTP请求来加载背景图片，因为可以通过CSS渐变来凭空生成所需要的图像：

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

它很优雅的实现了下划线，但是仍然有可以改进的地方。
下划线会穿过字母的降部，如果下划线在遇到字母的时候自动断开避让，是不是更好？这时候可以为文字添加两层 text-shadow 来模拟这种效果。

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

使用渐变来生成下划线的高明之处在于，这些线条极为灵活，比如，你可以生成一天虚线下划线：

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

---

参考书籍：Lea Verou《CSS揭秘》