如何在导航（CSS）中制作波浪式下划线？答案

【问题标题】：How to make wave-style underline in navigation (CSS)?如何在导航（CSS）中制作波浪式下划线？
【发布时间】：2016-01-31 18:39:39
【问题描述】：

所以大多数时候当前导航项的下划线（作为突出显示）只是一条线。有没有办法让它波浪形（比如菜单文本下的波浪形）？有没有可能制造出多层波浪（所以看起来像潮水）？

【问题讨论】：

您所要求的波浪样式没有 CSS 属性，在某种程度上存在简单的下划线。这可以通过使用适当的背景图像来完成。这种方法虽然可能有一些限制。
其实有一个CSS的方式来做到这一点！！看看here。将此问题标记为重复。
另一种可能的解决方案是使用border-image
天哪，那是正确的边界图像我正在考虑沿着这条线的东西！谢谢大家，很抱歉我之前没有找到重复的问题！
@Bitsnapper ：为了获得最佳浏览器支持，我建议使用background-image 而不是border-image。请参阅下面的代码示例了解如何执行此操作。

标签： html css

【解决方案1】：

另一种方法可以做到这一点。您可以使用text-decoration 来达到目的。

text-decoration-skip-ink: none; 可以画在整个文本内容的长度上。

.highlight-1 {
  text-decoration: red wavy underline;
  text-decoration-skip-ink: none;
}

.highlight-2 {
  text-decoration: blue wavy underline overline;
  text-decoration-skip-ink: none;
}

<p>
  The <span class='highlight-1'>Pixel 4</span> is right around the corner.
</p>

<p>
  The <span class='highlight-2'>Qualcomm Snapdragon 855</span> is expected to be the chipset of choice for the Pixel 4 devices, with reports of 6GB of RAM support.
</p>

【讨论】：

【解决方案2】：

波浪下划线在 CSS 规范中定义，但目前（2015 年 10 月）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 &lt;a href="#" class="error"&gt;laetst&lt;/a&gt; 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 &lt;a href="#" class="error"&gt;laetst&lt;/a&gt; Star Wars movie yet?

【讨论】：

【解决方案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%;
}

&lt;a href="#null"&gt;text of the anchor&lt;/a&gt;

【讨论】：

【解决方案4】：

您尝试做的事情可以通过使用 SVG 图形来实现。我的建议是：

创建所需形状的曲线。包含 SVG 元素直接在标记中的菜单链接之后。
将其绝对放置在链接下方。
对用户隐藏 SVG 元素，您可以为此使用 visibility:hidden 或 display:none，具体取决于您的布局以及适用于您的情况。
使用 CSS 创建规则，以便在将鼠标悬停在链接上时，将 SVG 元素设置为 display: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

【讨论】：