如何使用 CSS 创建实心彩虹边框？答案

【问题标题】：How create solid rainbow border with CSS?如何使用 CSS 创建实心彩虹边框？
【发布时间】：2018-08-07 12:59:07
【问题描述】：

如何使用 CSS 创建如下彩虹效果？

即顶部圆形边框，带有纯色彩虹色停止（不插入 html）。

颜色为：#c4e17f. #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4。

到目前为止我所做的尝试：

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 4px;
  
  background-image: repeating-linear-gradient(to right, #c4e17f 50px, #f7fdca 50px, #fad071 50px, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4);
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

【问题讨论】：

我想你不想只创建一张图片并将其设置为背景？
如果您指的是图形，请按图片，否。但是，如果您的意思是通过某种渐变左右的 CSS 背景图像，是的。

标签： css border linear-gradients repeating-linear-gradient

【解决方案1】：

离你不远了。只需将色标设置为相等的值，以便它们充当纯色，并且背景大小仅在顶部。

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 400px;
  height: 50%;
  background: white;
  border-radius: 4px;
  
  background-image: repeating-linear-gradient(to right,
  #c4e17f 0px, #c4e17f 50px,
  #f7fdca 50px, #f7fdca 100px,
  #fad071 100px, #fad071 150px,
  #f0766b 150px, #f0766b 200px,
  #db9dbe 200px, #db9dbe 250px,
  #c49cdf 250px, #c49cdf 300px,
  #6599e2 300px, #6599e2 350px,
  #61c2e4 350px, #61c2e4 400px);
  background-size: 100% 10px;
  background-repeat:no-repeat;
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

【讨论】：

哇，这就是我要找的。span>
如果有人想知道，浏览器对此的支持非常好：caniuse.com/#feat=css-repeating-gradients

【解决方案2】：

您可以使用after 伪元素和linear-gradient 来创建边框。

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 50%;
  height: 50px;
  background: white;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.top-round-rainbow:after {
  content: "";
  position: absolute;
  height: 10px;
  top: 0;
  width: 100%;
  left: 0;
  background: linear-gradient(to right, rgba(196,225,127,1) 0%, rgba(196,225,127,1) 12%, rgba(247,253,202,1) 12%, rgba(247,253,202,1) 25%, rgba(250,208,113,1) 25%, rgba(250,208,113,1) 39%, rgba(240,118,107,1) 39%, rgba(240,118,107,1) 52%, rgba(219,157,190,1) 52%, rgba(219,157,190,1) 65%, rgba(196,156,223,1) 65%, rgba(196,156,223,1) 78%, rgba(101,153,226,1) 78%, rgba(101,153,226,1) 89%, rgba(97,194,228,1) 89%, rgba(97,194,228,1) 100%);
}

<div class="container">
  <div class="top-round-rainbow"></div>
</div>

【讨论】：

不错的方法:)

【解决方案3】：

已经提供的解决方案是完美的，但我将使用 border 和渐变添加另一个解决方案。您也可以将渐变用作边框图像，但请注意，这不适用于边框半径。

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 400px;
  height: 50%;
  background: white;
  border-radius:5px;
  border-top: 10px solid;
  border-image:linear-gradient(90deg,
  #c4e17f 0 50px,
  #f7fdca 0 100px,
  #fad071 0 150px,
  #f0766b 0 200px,
  #db9dbe 0 250px,
  #c49cdf 0 300px,
  #6599e2 0 350px,
  #61c2e4 0 400px) 10;
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

【讨论】：

是的，您的添加仍然有帮助。如你所知，我的第一个直觉也是使用带边框的渐变。
@abdul-wahab 当我看到你的代码时，我很确定这一点；）这就是我添加这个的原因......因为将线性渐变作为背景处理和调整可能有点困难大小使其像边框一样，但它仍然是一个很好的解决方案，只需注意填充，因为背景是内容的一部分，与边框不同

【解决方案4】：

这个问题不一定需要伪元素或附加层。

要实现停止渐变，请在交叉点声明颜色。

要将背景图像的高度限制为 10 像素（或任意数字），但保持 100% 的宽度，请使用 background-size: 10px 100%。

为了防止渐变重复使用background-repeat: no-repeat;。

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 50%;
  height: 50%;
  border-radius: 4px;
  background: repeating-linear-gradient(to right, #c4e17f 0%, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fad071 25%, #fad071 37.5%, #f0766b 37.5%, #f0766b 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cdf 62.5%, #c49cdf 75%, #6599e2 75%, #6599e2 87.5%, #61c2e4 87.5%, #61c2e4 100%), white;
  background-size: 100% 10px, 100% 100%;
  background-repeat: no-repeat;
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

【讨论】：

【解决方案5】：

另一种方法，只是为了咯咯笑。这次有多个盒子阴影。

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 400px;
  height: 50%;
  background: white;
  box-shadow:
/*white overlay*/
  0 -150px 0 -10px white inset,
/*"borders" that cover each other*/
  50px 0 0 0 #c4e17f inset,
  100px 0 0 0 #f7fdca inset,
  150px 0 0 0 #fad071 inset,
  200px 0 0 0 #f0766b inset,
  250px 0 0 0 #db9dbe inset,
  300px 0 0 0 #c49cdf inset,
  350px 0 0 0 #6599e2 inset,
  400px 0 0 0 #61c2e4 inset;
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

不太实用，因为我们需要知道 div 的高度。但是它们使用边界半径产生了一些很酷的效果：p

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 400px;
  height: 50%;
  background: white;
  box-shadow:
/*white overlay*/
  0 -150px 0 -10px white inset,
/*"borders" that cover each other*/
  50px 0 0 0 #c4e17f inset,
  100px 0 0 0 #f7fdca inset,
  150px 0 0 0 #fad071 inset,
  200px 0 0 0 #f0766b inset,
  250px 0 0 0 #db9dbe inset,
  300px 0 0 0 #c49cdf inset,
  350px 0 0 0 #6599e2 inset,
  400px 0 0 0 #61c2e4 inset;
  
  border-radius:10px;
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

最后但并非最不重要的一点是，一个带有圆形边框 + 圆形框阴影，这使得 imho 看起来很棒。并且更有意义。

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 400px;
  height: 50%;
  background: white;
  border-radius:10px;
  position:relative;
  overflow:hidden;
  padding-top:10px;
}
  
.top-round-rainbow::before{
  content:"";
  position:absolute; top:0; left:0;
  height:10px; width:100%;
  box-shadow:
  50px 0 0 0 #c4e17f inset,
  100px 0 0 0 #f7fdca inset,
  150px 0 0 0 #fad071 inset,
  200px 0 0 0 #f0766b inset,
  250px 0 0 0 #db9dbe inset,
  300px 0 0 0 #c49cdf inset,
  350px 0 0 0 #6599e2 inset,
  400px 0 0 0 #61c2e4 inset;
  border-radius:10px 0 0 0;
}

<div class="container">
  <div class="top-round-rainbow">
  </div>
</div>

【讨论】：

【解决方案6】：

只需添加一个新层，这可以让您指定白色区域的大小。

希望这就是您想要的。如果需要，很乐意解释或帮助提供更好的解决方案。

.container {
  background: #596678;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-round-rainbow {
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 4px;
  border-top-width: 4px;
  background-image: repeating-linear-gradient(to right, #c4e17f 50px, #f7fdca 50px, #fad071 50px, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4);
}

.white-layer {
  width: 100%;
  height: 95%;
  margin-top: 5%;
  background: white;
  border-radius:  0 0 4px 4px;
  border-top-width: 4px;
}

<div class="container">
  <div class="top-round-rainbow">
    <div class="white-layer">
    </div>
  </div>
</div>

【讨论】：

谢谢，但您能否进一步检查一下，看看是否可以使用实心停止来制作渐变，如图所示。然后我们将看到如何避免添加额外的元素。