4 bordures en dégradé en CSS

Question

J'ai besoin d'aide pour appliquer un bordure en dégradé sur les 4 côtés d'une boîte. J'ai essayé, mais cela ne fonctionne que pour deux côtés. Après avoir regardé tous les liens et les réponses de SO, j'ai obtenu ceci :

.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>

J'apprécierais toute aide. J'essaie quelque chose de similaire à l'image ci-dessous. Merci.

Answer 1

Utilisation de l'image de fond : (produit le même résultat que votre image)

Vous semblez avoir des gradients qui sont différents de chaque côté et il est donc difficile d'y parvenir avec les border-image propriété. Vous pouvez essayer d'imiter ce comportement à l'aide des éléments suivants background-image comme dans l'extrait ci-dessous.

Ce que fait le code ci-dessous, c'est qu'il crée le dégradé pour chacun des 4 côtés en tant que bande d'image d'arrière-plan dégradé, puis utilise la fonction background-position pour les placer au bon endroit.

La bordure transparente du parent est un emplacement où la bordure imitée finira par apparaître. Le site background-origin: border-box fait en sorte que l'arrière-plan de l'élément commence à partir de border-box la zone elle-même (et non padding-box o content-box ). Ces deux étapes sont juste des étapes supplémentaires pour éviter l'utilisation d'une calc dans le 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>

---

Utilisation de l'image de la bordure : (produit une bordure sur les 4 côtés mais pas le même résultat que votre image)

Le meilleur résultat que vous puissiez obtenir avec border-image serait la suivante, mais comme vous pouvez le voir dans la démo, elle n'est pas exactement la même que votre image (ou le résultat du premier extrait) :

.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>