CSS中的4个渐变边框答案

【问题标题】：4 gradient borders in CSSCSS中的4个渐变边框
【发布时间】：2017-02-20 14:50:14
【问题描述】：

我需要帮助在框的所有 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>

如果有任何帮助，我将不胜感激。我正在尝试类似于下图的东西。谢谢。

【问题讨论】：

我最近看到了这个：Codepen.io
@Vucko 您附加的链接无法正常工作。在发布问题之前我已经检查过了
@RaisingAgent 您附加的链接很有帮助。如果它有效，我会很快回来。谢谢你

标签： html css border linear-gradients

【解决方案1】：

使用背景图片：（产生与您的图片完全相同的输出）

您似乎在每一侧都有不同的渐变，因此使用border-image 属性很难实现这一点。您可以尝试使用background-image 来模仿这种行为，如下面的 sn-p 所示。

基本上，下面的 sn-p 所做的是，它为 4 个边中的每一个创建渐变作为渐变背景图像条，然后使用 background-position 将它们放置在正确的位置。

parent 上的透明边框是一个占位符，模仿的边框最终会出现在该处。 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 属性可以获得的最佳输出如下，但正如您从演示中看到的那样，它与您的图像（或第一个 sn-p 的输出）并不完全相同：

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

【讨论】：

非常感谢。这很完美。你能告诉我黑白边框图像和背景图像的区别吗？实际上哪个更好？
@rahulpatel：这里实际上没有太大区别。 border-image 是创建边框渐变的推荐属性，但它不会产生您需要的输出，因此我们只能使用替代方法。使用background-image 并没有错（我知道它的语义是明智的，但那是另一回事）。唯一的问题是，如果元素实际上也有渐变/图像背景，那么我们在放置它时需要格外小心。但这可以使用相同的属性（background-origin、background-position）+ 一个额外的background-clip 来完成。这不是不可能的:)

【解决方案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;
}

&lt;div&gt;text&lt;/div&gt;

【讨论】：