CSS中的4个渐变边框

Question

我需要帮助在框的所有四边应用渐变边框。我尝试过，但它只适用于双方。看着所有的链接和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）。这两个只是额外的步骤，以避免在background-position中使用不必要的calc东西。

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