border-image: linear-Gradient (), чтобы установить многоцветную границу

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>

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

Answer 2

Всегда хорошо опубликовать свой код или ссылку на jsfiddle или codepen.Вы можете обратиться к разделу справки о том, как спрашивать?

В вашем случае показанный здесь дизайн не похож на градиент.У меня есть сплошной цвет и границы на нем.Границы могут быть использованы на границе, вы можете видеть это здесь

Чтобы добиться того, что вы показали, я бы использовал: после и после стиля,

 a{
      position: relative;
      padding-bottom: 20px;

    &:after{
      position: absolute;
      content: '';
      height: 10px;
      width: 100%;
      left: 0;
      bottom: 0;
      background: #a4c0e9;
      border-top: 1px solid #707070;
      border-bottom: 1px solid #707070;
    }
    }