解決文字與下划線重疊的問題

最近在網上看了張鑫旭老師的一個帖子（解決文字和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屬性模擬。

我就不多一一介紹了，感興趣的話可以去張老師的博客查看詳情。