如何用CSS創建實心彩虹邊框？

Question

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

即頂部圓形邊框，實心彩虹色停止（不插入html）。

顏色是： #c4e17f. #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4 #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> 

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

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

Answer 3

此問題不一定需要偽元素或附加層。

要實現停止漸變，請在交叉點處聲明顏色。

要將背景圖像高度限制為10px（或任意數字），但保留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> 

Answer 4

已經提供的解決方案是完美的，但我將使用邊框和漸變添加另一個。 您也可以將漸變用作邊框圖像，但請注意，因為這不適用於border-radius。

 .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(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) 10; } 

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

Answer 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的高度。 但它們使用border-radius制作了一些很酷的效果：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> 

最后但並非最不重要的是，一個帶有圓形邊框+圓形框陰影，這使得外觀非常棒。 並且更有意義。

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

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