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, как в приведенном ниже фрагменте.

В основном то, что делает нижеприведенный фрагмент, состоит в том, что он создает градиент для каждой из четырех сторон в виде градиентных полос изображения, а затем использует 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>