解决文字与下划线重叠的问题

最近在网上看了张鑫旭老师的一个帖子（解决文字和text-decoration:underline下划线重叠问题），收获不小。原文链接（http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/）

下面我简单的分享一下张鑫旭老师的几种方法。

我们所要解决的问题是：当设置文字text-decoration:underline;的时候，文字和下划线紧贴在一起，看起来很不舒服。

就像这样：金玉全王

方法一：text-decoration-skip指定覆盖关系

text-decoration-skip是与text-decoration相关的CSS3属性。

效果很不错，不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值。

此方法是最原生的，但是由于兼容性问题，目前还不太合适。

方法二：使用border-bottom属性模拟

 我觉得这是一个不错的想法，CSS博大精深，哈哈。^.^

内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果。（张老师的原话）

代码如下：

a {
    text-decoration: none;
    border-bottom: 1px solid;
}
效果图：金玉全王

这样写的有点在于border-bottom还有dashed属性，我们还可以创造虚线下划线  :P

a {
    text-decoration: none;
    border-bottom: 1px dashed;
}
效果图：金玉全王

方法三：使用box-shadow属性模拟

 使用box-shadow的想法也是很棒的，其实动动脑子，CSS还有好多玩法。(●'◡'●)

直接上代码~

a {
    text-decoration: none;
    box-shadow: 0 1px;
}
这里box-shadow用了两个值，在这里解释一下：

box-shadow: h-shadow v-shadow blur spread color inset;
此处的两个值分别是 h-shadow 和 v-shadow。

h-shadow：水平阴影的位置。允许负值。

v-shadow：垂直阴影的位置。允许负值。

垂直阴影为1px于是就有了下划线的样子。
相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。
但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。（张老师原话）

方法四：使用canvas实现（著名的Underline.js）

 Underline.js项目地址：https://github.com/wentin/underlineJS

基本上，适合用在局部一些大的标语，标题，slogon等位置或者追求视觉的官方网站或活动页面上使用。

其他方法

例如：使用SVG滤镜处理、使用background-image属性模拟。

我就不多一一介绍了，感兴趣的话可以去张老师的博客查看详情。