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