8

如何使用 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>

4

6 回答 6

12

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

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

于 2018-02-27T19:13:37.190 回答
4

您可以使用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>

于 2018-02-27T19:15:34.843 回答
3

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

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

于 2018-02-27T20:06:07.797 回答
2

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

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

要将背景图像高度限制为 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>

于 2018-02-27T19:12:10.570 回答
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;
  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>

于 2018-02-28T04:04:03.653 回答
0

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

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

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

于 2018-02-27T19:07:46.963 回答