摘要：簡(jiǎn)介有許多種不同的方式來(lái)實(shí)現(xiàn)下劃線，你也許還記得這篇文章。這是一條基本的下劃線，它大小合適。想法是用線性漸變和來(lái)創(chuàng)建一個(gè)在水平方向重復(fù)的背景圖。可以實(shí)現(xiàn)漂亮的可交互的下劃線。

本文來(lái)自css-tricks，介紹了在不同的場(chǎng)景下實(shí)現(xiàn)下劃線的7種方式。

有許多種不同的方式來(lái)實(shí)現(xiàn)下劃線，你也許還記得Crafting link underlines on Medium這篇文章。Medium也不是想做什么瘋狂的事情，他們只是想讓他們的文字下面好看一點(diǎn)。

這是一條基本的下劃線，它大小合適。絕對(duì)比瀏覽器的默認(rèn)樣式好看的多。所以，看上去Medium為了實(shí)現(xiàn)這個(gè)效果也經(jīng)歷了許多困難。兩年后，實(shí)現(xiàn)一個(gè)好看的下劃線依然一樣困難

為什么不能直接用text-decoration: underline呢？如果我們談?wù)摰氖抢硐雸?chǎng)景，underline需要滿足下面這些場(chǎng)景：

在基線下面定位

跳過(guò)descenders

改變顏色，厚度（thickness）和樣式

重復(fù)包裹文字

在任何背景下都生效

我認(rèn)為這些需求都是很合理的，但是到目前為止，沒有一種直觀的方式用css來(lái)實(shí)現(xiàn)上面的所有目標(biāo)

因此，能實(shí)現(xiàn)下劃線的方法都有哪些？

text-decoration

border-bottom

box-shadow

background-image

SVG filters

Underline.js (canvas)

text-decoration-*

讓我們來(lái)一個(gè)個(gè)的討論這些方法的好處和壞處

text-decoration是最直接的實(shí)現(xiàn)方式，只用一個(gè)屬性就能實(shí)現(xiàn)給文字添加下劃線。當(dāng)字體比較小的時(shí)候，看上去沒什么問(wèn)題，但是當(dāng)字體變大的時(shí)候，看上去就有點(diǎn)笨拙了。

{% codepen lixuejiang aByLLO 0 %}

text-decoration最大的問(wèn)題是缺少定制化，它直接使用文字的顏色和字體，不能跨瀏覽器修改樣式，更多內(nèi)容后面會(huì)介紹

使用方便

定位在基線下面

在Safari和iOS里跳過(guò)了descenders

多行也沒問(wèn)題

所有的背景也ok

在其他瀏覽器里不能跳過(guò)descenders

不能修改顏色，厚度和樣式

border-bottom在快速和定制化之間提供了一個(gè)很好的平衡。這個(gè)方法用了css邊框，你可以修改顏色，厚度和樣式。
inline元素的border-bottom長(zhǎng)這樣

{% codepen lixuejiang XNaeVW 0 %}

最大的問(wèn)題是下劃線離文本有多遠(yuǎn)--下劃線就在descenders下面。你可以通過(guò)讓元素變成inline-block然后減少line-height來(lái)改變這個(gè)距離。但是你就失去了包裹文本的能力。單行元素沒問(wèn)題，其他情況就不行了。

{% codepen lixuejiang xRLXYZ 0 %}

另外，你可以用text-shadow來(lái)蓋住descenders附近的部分，但是你需要用和背景色一樣的顏色。這一位置他只能在固定顏色的背景上生效，漸變的背景和背景圖沒用。

用text-shadow可以跳過(guò)descenders

可以改變顏色，厚度和樣式

可以對(duì)顏色和厚度實(shí)施漸變和動(dòng)畫

inline-block自動(dòng)包裹

用text-shadow可以支持任意背景

定位很遠(yuǎn)，而且很難重定位

需要使用一系列不相干的屬性

Janky text selection when using text-shadow ？？

box-shadow需要兩個(gè)inset box shadows來(lái)實(shí)現(xiàn)下劃線：其中一個(gè)創(chuàng)建一個(gè)矩形，另外一個(gè)蓋在上面。這種方法要能生效的前提是使用固定顏色的背景

{% codepen lixuejiang eBEeOp 0 %}
你也可以用text-shadow來(lái)模擬文字的descenders和underline之間的空白。但是如果下劃線和文字的顏色不一樣的時(shí)候，或者空白最夠薄的時(shí)候，他就不能像text-decoration一樣很好的工作了。

可以定位在基線下面

用text-shadow可以跳過(guò)descenders

可以改變顏色，厚度

多行也能生效

不能修改樣式

不能在漸變和背景圖的情況下生效

background-image是最接近我們想要的而且問(wèn)題最少的實(shí)現(xiàn)方式。想法是用線性漸變和background-position來(lái)創(chuàng)建一個(gè)在水平方向重復(fù)的背景圖。然后設(shè)置元素display: inline

{% codepen lixuejiang LbjOEj 0 %}

下面這個(gè)方法沒有用線性漸變，而是用的背景圖，你可以用你自己的圖片來(lái)實(shí)現(xiàn)一些很酷的效果：
{% codepen lixuejiang RoZjNy 0 %}

可以定位在基線下面

用text-shadow可以跳過(guò)descenders

可以改變顏色，厚度（允許0.5像素）和樣式

可以使用自定義圖片

多行也能生效

用text-shadow可以支持任意背景

在不同的分辨率，不同的瀏覽器和不同的縮放情況下，圖片的尺寸不一樣

這種方法我一直在研究。你可以創(chuàng)建一個(gè)畫了一條線的SVG filter行內(nèi)元素，把他該在文本上面。然后給這個(gè)元素設(shè)置一個(gè)ID，之后就可以在css里引用這個(gè)元素：url(‘#svg-underline’)
其中一個(gè)優(yōu)勢(shì)就是在不依賴text-shadow的情況下支持透明。這也就意味著在任何背景上都可以跳過(guò)descenders，包括漸變和背景圖。但是他只支持單行的文本

{% codepen lixuejiang bBrYEJ 0 %}

在 Chrome 和 Firefox里看起來(lái)像這樣：

IE, Edge, 和 Safari的瀏覽器支持有問(wèn)題，很難在css里測(cè)試瀏覽器對(duì)SVG filter的支持。可以用@supports屬性。但是這只能測(cè)試引用是否生效。而不是filter自己。這個(gè)方法不支持跨瀏覽器。

可以定位在基線下面

跳過(guò)descenders

可以改變顏色，厚度和樣式

支持任意背景

不支持多行

在 IE, Edge, 或者 Safari里不生效，在這幾個(gè)瀏覽器里可以用text-decoration

Underline.js很屌，如果你還沒看過(guò)他的tech demo,趕緊停下來(lái)，去看一看。有一個(gè)很酷炫的時(shí)長(zhǎng)9分鐘的介紹它是如何工作的視頻。在這里我會(huì)簡(jiǎn)短的介紹一下：它用標(biāo)簽來(lái)畫下劃線。這是一種很新穎的方法，而且能效果出奇的好。

盡管有名氣。Underline.js只是個(gè)demo。你不能在不修改他們的代碼的情況下直接在你的項(xiàng)目里引用它。
在這里把它作為一種實(shí)現(xiàn)方式來(lái)討論還是很值得的。可以實(shí)現(xiàn)漂亮的可交互的下劃線。但是你必須得寫一些JavaScript代碼。

還記得text-decoration里提到的后面會(huì)詳細(xì)介紹嗎？
text-decoration自身也能很好的工作，你也可以添加一些實(shí)驗(yàn)性的屬性來(lái)定義樣式：

Remember the “more on that later” part? Well, here we are.

text-decoration-color

text-decoration-skip

text-decoration-style

也不要太激動(dòng)。需要考慮瀏覽器兼容性

text-decoration-color允許你改變下劃線的顏色，可以和文字顏色不一樣。它的跨瀏覽器支持比想象中的要好。在Firefox和Safari里都能正常運(yùn)行。
但是有一個(gè)問(wèn)題：如果沒有清除descenders，Safari會(huì)把下劃線放在文字上面?
Firefox：

Safari：

text-decoration-skip可以跳過(guò)descenders

這個(gè)屬性是非標(biāo)準(zhǔn)的，現(xiàn)在只有Safari支持。所以需要加-webkit-前綴。Safari默認(rèn)啟用這個(gè)屬性，這也就是為什么在沒有指定這個(gè)值的時(shí)候，下劃線也跳過(guò)了descenders
如果你在用Normalize，你應(yīng)該知道最近的版本禁止了這個(gè)屬性，來(lái)保證各個(gè)瀏覽器的顯示一直。如果你想要一些夢(mèng)幻般的下劃線，你可以打開這個(gè)屬性

text-decoration-style提供了像border-style一樣的屬性。另外還添加了wavy lines:

dashed

dotted

double

solid

wavy

目前只有FireFox支持這個(gè)屬性：

是不是看上去很眼熟？

text-decoration-*這一系列屬性確實(shí)比用其他的css屬性來(lái)實(shí)現(xiàn)下劃線要直觀。但是看一看我們一開始的需求。這些屬性不支持定義厚度和位置。

經(jīng)過(guò)一番研究，發(fā)現(xiàn)了下面兩個(gè)屬性：

text-underline-width

text-underline-position

他們出現(xiàn)在早起的css草案里，但是因?yàn)槿鄙倮麧?rùn)而沒被實(shí)現(xiàn)。不用怪他們（指瀏覽器廠商）。

所以實(shí)現(xiàn)下劃線最好的方式是什么？

這就要看實(shí)際情況了
對(duì)于字體小的問(wèn)題，我推薦text-decoration，然后用text-decoration-skip。在大多數(shù)瀏覽器里看起來(lái)有點(diǎn)平淡。但是下劃線就那樣，人們也不會(huì)介意。但是如果你足夠耐心，總是有機(jī)會(huì)的。總有一天，下劃線在不需要更改任何東西的情況下變得很帥氣。

對(duì)于body text，可以用background-image。它能生效，而且很不錯(cuò)，還有Sass mixins。如果下劃線很細(xì)或者需要和文本不一樣 的顏色的時(shí)候，還可以用text-shadow

對(duì)于單行的文本，可以用border-bottom.
如果想跳過(guò)漸變和背景圖上的descenders，用SVG filters。
將來(lái)的瀏覽器支持足夠好了，答案是text-decoration-* 屬性

原文