css - 如何使用边框图像和线性渐变设置多色边框？

Question

试图制作如下图所示的多色底部边框，但失败了。

尝试使用border-image: linear-gradient()，但没有成功。它只得到其中一种颜色：#707070.

a {
  color: #707070 !important;
  font-size: 20px;
  text-decoration: none;
  margin-right: 50px;
  border-bottom: 5px solid;
  border-image: linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 5;
}

<div id="nav">
  <a href="/">HOME</a>
  <a href="/projects">PROJECTS</a>
  <a href="/resume">RESUME</a>
</div>

标签： csslinear-gradientsborder-image

Answer 1

问题是百分比是相对于元素的，而不是相对于20%大于的边框5px。

您需要考虑像素值。您还需要从底部开始，因为顶部引用也是元素的顶部：

a {
  color: #707070 !important;
  font-size: 20px;
  text-decoration: none;
  margin-right: 50px;
  border-bottom: 5px solid;
  border-image: 
    linear-gradient(to top, #707070 1px, #a4c0e9 1px, #a4c0e9 4px, #707070 4px) 5;
}

<a>A link element</a>

或者用它作为背景，它会更容易处理：

a {
  color: #707070 !important;
  font-size: 20px;
  text-decoration: none;
  margin-right: 50px;
  border-bottom: 5px solid transparent;
  background: 
    linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) bottom/100% 5px border-box no-repeat;
}

<a>A link element</a>

相关：渐变边框图像的border-image-slice

---

这是一个示例，可以更好地说明您遇到的问题：

.box {
  width:100px;
  height:100px;
  display:inline-block;
  border-bottom:10px solid rgba(0,0,0,0.2);

}

<div class="box" style="background:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) border-box">
</div>

<div class="box" style="border-image:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 10 fill">
</div>

<div class="box" style="border-image:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 10 ">
</div>

在此示例中，第一个框显示我们将使用的渐变。在第二个中，我们将它应用于边框fill，同时为中间区域着色，在最后一个中，我们只着色border-bottom