4 градиентных границы в CSS

Question

Мне нужна помощь в нанесении градиентной границы на все 4 стороны коробки. Я попробовал, но это работает только для двух сторон. После просмотра всех ссылок и ответов SO я получил это:

.test{
  height:250px;
  border: 2px solid;
  border-image: linear-gradient(to left,rgba(78,137,176,1)  1%, rgba(115,192,85,1)  100%) 100% 0 100% 0/2px 0 2px 0;
  padding-top:50px;
}

<div class="test">
  This is a box and I want borders for all the sides
</div>

Буду признателен за любую помощь. Я пытаюсь что-то похожее на изображение ниже. Спасибо.

Answer 1

Используя фоновое изображение: (производит точный вывод как ваше изображение)

У вас, кажется, есть градиенты, которые отличаются с каждой стороны, и поэтому трудно достичь этого с border-image имущество. Вы можете попытаться подражать поведению, используя background-image как в приведенном ниже фрагменте.

В основном то, что делает приведенный ниже фрагмент, это то, что он создает градиент для каждой из 4 сторон в виде полос градиентного фонового изображения, а затем использует background-position разместить их в правильном месте.

Прозрачная граница для родителя - это заполнитель, в котором должна отображаться мимическая граница. background-origin: border-box заставляет фон элемента начинаться с border-box сама область (а не padding-box или же content-box). Эти два являются просто дополнительными шагами, чтобы избежать использования ненужных calc вещи в background-position,

.test {
  height: 250px;
  border: 2px solid transparent;
  background-image: linear-gradient(to right, rgb(187, 210, 224), rgb(203, 231, 190)), linear-gradient(to bottom, rgb(114, 191, 87), rgb(116, 191, 86)), linear-gradient(to left, rgb(204, 233, 187), rgb(187, 210, 224)), linear-gradient(to top, rgb(84, 144, 184), rgb(80, 138, 176));
  background-origin: border-box;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
  padding-top: 50px;
}

<div class="test">
  This is a box and i want border for all the side
</div>

---

Используя изображение границы: (создает границу на всех 4 сторонах, но не совпадает с выводом вашего изображения)

Лучший результат, который вы могли бы получить с border-image свойство будет ниже, но, как вы можете видеть из демонстрации, оно не совсем совпадает с вашим изображением (или выводом первого фрагмента):

.test {
  height: 250px;
  border: 2px solid;
  border-image: linear-gradient(to left, rgba(78, 137, 176, 1) 1%, rgba(115, 192, 85, 1) 100%);
  border-image-slice: 1;
  padding-top:50px;
}

<div class="test">
  This is a box and i want border for all the side
</div>

Answer 2

Я понял это для себя так:

фон меняется внутри фонового изображения.

div {
  width: 170px;
  height: 48px;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(to bottom, #fff042, #ff5451);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

<div>text</div>