將CSS邊框顏色分成4種顏色

Question

有什麼方法可以在CSS邊框的一邊有4種不同的顏色？我目前有

#header 
{ 
border-color:#88a9eb; 
} 

我想有一個4純色的邊界，每個25％分裂，這是可能的東西嗎？

我想製作一個沒有白色之間的固體版本。

Answer 1

複雜，但涼溶液：使用SVG（例如<svg>標記），添加4點的路徑，分配不同的stroke-dasharray和stroke-color屬性。

簡單而尚酷的解決方案：嘗試border-image。 （見哈利的答案）

很簡單的解決方案，如果你只需要一個邊界：創建圖像，但它作爲背景圖像，重複它只在一個軸上，它的位置在容器，例如邊緣（對於底部邊框）

.container { 
    background-image: url(image.png); 
    background-repeat: repeat-x; 
    background-position: bottom left; 
} 

Answer 2

可以使用border-image屬性來創建漸變邊框有4種顏色。通常，漸變從一種顏色逐漸移動到另一種顏色，併產生模糊效果，但設置了color-stops（百分比值），使得一種顏色的終點與下一種顏色的起點相同，使顏色變爲硬停，從而最終產生塊效應。

邊界可以通過改變border-image-width和梯度的方向被設置爲所需的一側。例如，頂部&底部邊框將需要從左側到右側的梯度，而左側&右側邊界將需要梯度從頂部到底部。

梯度用百分比值的大小（和顏色停止），從而它們響應默認情況下，可以自動即使容器的尺寸變化相適應。

使用border-image唯一的缺點是poor browser support此屬性在本。 IE10-不支持此屬性。

.bordered-top { 
 
    border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 4px 0px 0px 0px; 
 
} 
 
.bordered-bottom { 
 
    border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 0px 0px 4px 0px; 
 
} 
 
.bordered-left { 
 
    border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 0px 0px 0px 4px; 
 
} 
 
.bordered-right { 
 
    border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 0px 4px 0px 0px; 
 
} 
 
div { 
 
    height: 100px; 
 
    width: 300px; 
 
    padding: 10px; 
 
    background: beige; 
 
    margin: 10px; 
 
}

<!-- library added only for old browser support --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<div class='bordered-top'>Border only on top</div> 
 
<div class='bordered-bottom'>Border only on bottom</div> 
 
<div class='bordered-left'>Border only on left</div> 
 
<div class='bordered-right'>Border only on right</div>

---

對於IE10 +的支持，您可以通過使用梯度爲background-image屬性，而不是像border-image在下面的代碼片段模仿相同的行爲。

不像border-image，在這裏被應用無法使用border-image-width控制邊界，我們必須使用background-position而不是像在所需位置定位的一面。

background-size所述確定邊框的厚度。對於頂部&底部邊界，x軸的大小應爲100％，而y軸的大小是邊框的厚度。對於左側&右側邊框，y軸的大小應爲100％，而x軸的大小爲邊框的粗細。

.bordered-top { 
 
    background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 100% 4px; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%; 
 
} 
 
.bordered-bottom { 
 
    background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 100% 4px; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 100%; 
 
} 
 
.bordered-left { 
 
    background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 4px 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%; 
 
} 
 
.bordered-right { 
 
    background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 4px 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 100% 0%; 
 
} 
 
div { 
 
    height: 100px; 
 
    width: 300px; 
 
    padding: 10px; 
 
    background: beige; 
 
    margin: 10px; 
 
}

<!-- library added only for old browser support --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<div class='bordered-top'>Border only on top</div> 
 
<div class='bordered-bottom'>Border only on bottom</div> 
 
<div class='bordered-left'>Border only on left</div> 
 
<div class='bordered-right'>Border only on right</div>

Answer 3

您可以使用box-shadow和afterpsuedo-element做到這一點

我所做的：

我首先創建底部的:after元素，然後box-shadow小號水平增加與不同colors

如果要更改邊框的強度只是給更高度的:after元素

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    position: relative; 
 
    background: grey; 
 
} 
 
div:after { 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: ""; 
 
    width: 50px; 
 
    height: 5px; 
 
    background: green; 
 
    box-shadow: 50px 0 0 0 red, 100px 0 0 0 orange, 150px 0 0 0 green; 
 
}

<div></div>

同樣的事情在更大div會是這樣

div { 
 
    width: 500px; 
 
    height: 100px; 
 
    background: orange; 
 
    position: relative; 
 
} 
 
div:after { 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: ""; 
 
    width: 100px; 
 
    height: 5px; 
 
    background: green; 
 
    box-shadow: 100px 0 0 0 darkred, 200px 0 0 0 red, 300px 0 0 0 yellow, 400px 0 0 0 tomato; 
 
}

<div></div>

Answer 4

你可以試試這個：

.solid{ 

    width: 300px; 
    border-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%); 
    border-image-slice: 4; 


} 

DEMO

Answer 5

我已經採取了哪些哈里不得不和修改它來滿足我的需求。我現在有：

border-image: linear-gradient(to right, #8CC63F 0%, #006F3B 25%, #ED1C24 25%, #9B1B1E 50%, #85CDEC 50%, #217EC2 75%, #FFC20E 75%, #F04E23 100%); 
    border-image-slice: 3; 
    border-image-width: 0px 0px 4px 0px; 
    border-image-repeat: round; 

這是我的需求的最佳解決方案。

Answer 6

最好的解決辦法是用linear-gradient。當然。 但是有人在這個初學者可能會發現這個解決方案有用。通過使用2-3-4種顏色或甚至更多，這是做他們的正確方法。不是這個問題的最佳解決方案，但也許有人在閱讀時想要更好地瞭解帶邊框的顏色是如何工作的。

<html> 
 
<head> 
 
<style> 
 
p.one { 
 
    border-style: solid; 
 
    border-color: #0000ff; 
 
} 
 

 
p.two { 
 
    border-style: solid; 
 
    border-color: #ff0000 #0000ff; 
 
} 
 

 
p.three { 
 
    border-style: solid; 
 
    border-color: #ff0000 #00ff00 #0000ff; 
 
} 
 

 
p.four { 
 
    border-style: solid; 
 
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255); 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p class="one">One-colored border!</p> 
 
<p class="two">Two-colored border!</p> 
 
<p class="three">Three-colored border!</p> 
 
<p class="four">Four-colored border!</p> 
 

 
</body> 
 
</html>