如何在導航（CSS）中製作波浪式下劃線？

Question

因此，大多數情況下，當前導航項的下劃線（作爲突出顯示）只是一條線。有沒有辦法讓它變成波浪形（就像菜單文字下的波浪）？是否有可能做出多層波浪（所以它看起來像一個潮汐）？

Answer 1

波浪下劃線在CSS規範定義，但目前（10月，2015年），Firefox是支持它的only browser：

.error { 
 
    color: inherit; 
 
    text-decoration: underline; /* All browsers */ 
 
    text-decoration-color: red; /* Firefox only */ 
 
    text-decoration-style: wavy; /* Firefox only */ 
 
}

Have you seen the <a href="#" class="error">laetst</a> Star Wars movie yet?

對於在有效的解決方案所有瀏覽器，您可以使用背景圖片：

.error { 
 
    color: inherit; 
 
    text-decoration: none; 
 
    background: url(http://www.phpied.com/images/underline.gif) bottom repeat-x; 
 
}

Have you seen the <a href="#" class="error">laetst</a> Star Wars movie yet?

Answer 2

你正在嘗試做的事情可以通過使用SVG圖形來實現。 我的建議是：

• 創建您需要的形狀的曲線。直接在標記中的菜單鏈接之後加入SVG元素 。
• 將其絕對置於鏈接下。
• 隱藏用戶的SVG元素，您可以使用visibility：hidden或display：none取決於您的佈局以及您的情況。
• 使用CSS創建規則，以便在懸停在鏈接上時，將SVG元素設置爲顯示：block或display：inline-block（取決於您的佈局）。

與使用圖形相比，它具有一些優點，因爲它很容易更改顏色或對顏色應用較好的漸變，或調整其大小。

有關創建SVG曲線看看這個鏈接信息（見paths節）： https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

您可能會發現它更容易使用的圖形SBG的工具，而不是試圖儘管編寫自己加價！一種這樣的工具可以在這裏在線找到： http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

Answer 3

只使用data:image/png;base64在（例如）10x10像素網格上形成一個單波。 調整所需波形效果的背景大小。

Working Fiddle here 工作一段時間應該達到預期的效果。

a { 
 
    line-height: 15px; 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    position: relative; 
 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAH0lEQVQYlWNgGObgPxQTVISNjVMRTjF8Vv0nRhFcDQDv1Qn3IBa3OQAAAABJRU5ErkJggg==) repeat-x; 
 
    background-position: bottom; 
 
    background-size: 10% 30%; 
 
}

<a href="#null">text of the anchor</a>