一、之前使用漸變的實現(xiàn)方法
之前有使用過CSS radial-gradient徑向漸變實現(xiàn)過波浪線效果。

讓我找找在哪里實現(xiàn)的……

? ? ? 找啊找啊，找朋友找到一個好朋友，敬個禮……牽牽手……? ? ?

啊，找到了，之前有篇文章介紹過：“CSS實現(xiàn)文字下面波浪線動畫效果”，里面介紹了2種方法可以實現(xiàn)下圖所示的波浪線效果：

鏈接hover與波浪線顯示示意

其中一個方法就是CSS漸變實現(xiàn)，不過這個方向雖然看上去還挺屌的，但是實際上挺屌的，學(xué)習(xí)難度挺屌的，下面是demo頁面相關(guān)代碼截圖：

波浪線繪制代碼

如果說隔壁張三想要調(diào)整下波浪線的尺寸，怕是頭發(fā)都要少掉好幾根。

文章最后提到了text-decoration與下劃線，當時我的建議是：

因此，實際開發(fā)，不建議在實際項目中使用。而且你無法預(yù)知每個波浪線重復(fù)片段的寬度，想要無限運動理論上就不太可行。

我仔細琢磨了上面這一段話，發(fā)現(xiàn)打臉了，幸好，當時說話沒有那么絕，否則現(xiàn)在臉估計都打腫了。

最近我突發(fā)靈感，突然想到如何使用text-decoration實現(xiàn)長的波浪線效果了，不會有和文本skip重疊或跳過的問題，而且可以脫離文本實現(xiàn)寬度自適應(yīng)。

因此，在實際項目中使用是可以的，這部分打臉了。后面則沒有問題，實現(xiàn)無限運動的動畫效果呢，就有點懸，因為不同瀏覽器像他那個波段的寬度是不一樣的，要想實現(xiàn)無縫連接的無限運動效果還是有點難度的，得要人我再好好想想。

不過如果只是想實現(xiàn)一個靜態(tài)的波浪線效果，則我發(fā)現(xiàn)text-decoration:wavy是個不錯的實現(xiàn)。

二、text-decoration與寬度自適應(yīng)波浪線
我們在文章和布局中經(jīng)常會用到分隔線，傳統(tǒng)的分隔線都是一條直線，或者虛線，或者點線，顛來倒去就這些，早都已經(jīng)看膩了。

你說我們是不是可以用波浪線來進行分隔呀，就像下面這樣的實時效果（不支持瀏覽器為直線），說不定設(shè)計師小姐姐和小哥哥們看完效果之后會對你交口稱贊。

實現(xiàn)的代碼如下：

wavy {
    display: block;
    height: .5em;
    white-space: nowrap;
    letter-spacing: 100vw;
    padding-top: .5em;
    overflow: hidden;
}
wavy::before {
    content: "\2000\2000";
    /* IE瀏覽器實線代替 */
    text-decoration: overline;
    /* 現(xiàn)代瀏覽器 */
    text-decoration: overline wavy;
}
此時，只要在頁面上插入下面這段HTML代碼，就會有波浪線效果了。

<wavy></wavy>
截圖效果示意：

波浪線效果截圖

波浪線實現(xiàn)原理
偽元素生成兩個空格，使用letter-spacing屬性控制兩個空格占據(jù)的寬度足夠?qū)挘@樣空格字符的裝飾線的尺寸一定可以充滿整個容器，此時只要設(shè)置裝飾線的類型是波浪線，寬度100%自適應(yīng)的波浪線效果就實現(xiàn)了。

優(yōu)點
這種實現(xiàn)方法的優(yōu)點在于非常容易理解，非常容易上手，然后的話顏色很好控制，使用color屬性就好啦。大小也非常容易控制，使用font-size屬性就好了。

不足-兼容性
這個方法缺點就在于兼容性不太夠，wavy本質(zhì)上text-decoration-style屬性的值，不過由于Safari瀏覽器并不支持text-decoration-style屬性，因此，Safari瀏覽器下沒有波浪線效果，這個有點頭疼，因此，text-decoration:wavy實現(xiàn)的波浪線效果只適合用在體驗漸進增強的場景。

例如本文所示的分隔線場景，如果瀏覽器不支持，那還是回到以前的直線效果，如果瀏覽器支持，就使用更好的波浪線效果。

什么？你問IE瀏覽器的兼容性如何？

那還要說嗎？還要說嗎？毫無疑問，肯定……不支持！

責任編輯：中山網(wǎng)站建設(shè)
 【網(wǎng)訊網(wǎng)絡(luò)】國家高新技術(shù)企業(yè)》十一年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計，APP開發(fā)，小程序，微信公眾號開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進銷存管理軟件等)！服務(wù)熱線：0760-88610046、13924923903，http://www.denorpool.com