Question

因此，大多数情况下，当前导航项的下划线（作为突出显示）只是一行。有没有办法使它变得波浪状（如菜单文本下的波浪）？是否可以制作多层波浪（所以它看起来像潮水）？

Answer 1

CSS规范中定义了波浪下划线，但目前（2015年10月）Firefox支持它的only browser：

＆＃13;

 <video src=""/>

＆＃13;

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

＆＃13;

对于适用于所有浏览器的解决方案，您可以使用背景图片：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

仅使用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>

Answer 3

使用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

Answer 4

另一种相同的方法。为此，您可以使用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>

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

4 个答案: