CSS边框颜色到4种颜色 [英] CSS Border Colour Into 4 Colours

问题描述

有什么办法，我可以在CSS的边框的一边有4种不同的颜色？我目前有

  #header 
 {
 border-color：＃88a9eb; 
} 
  

我想要一个4色的边框，这是可能的吗？

我想做一个坚实的版本，而不是之间的白色位。

解决方案

您可以使用 border-image 属性来创建具有4种颜色的渐变边框。通常梯度从一种颜色逐渐移动到另一种颜色，并产生模糊效果，但设置 color-stops （百分比值），以使一种颜色的结束点与下一种颜色的起点相同，使颜色达到硬停止，从而最终产生块状效应。

边框可以通过改变 border-image-width 梯度。例如，top&底部边框需要从左边到右边的渐变，而左边<右边框需要渐变从顶部到底部。

渐变使用尺寸（和颜色停止）的百分比值，因此它们默认是响应的，并且即使容器的尺寸改变也可以自动适应。

使用 border-image 是目前此媒体资源的浏览器支持不佳。 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;} border-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;背景：米色; margin：10px;}  

 仅适用于旧浏览器支持 - >< script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script>< div仅限于顶部< / div>< div class ='bordered-bottom'>仅在左侧边框< / div>< div class ='bordered-right'>仅在右侧边框< / div>   
 
 
 
 
 
对于IE10 +支持，您可以通过使用渐变为 background-image 
 
 
 
与 border-image 不同， code> border-image ，这里边框应用的边不能使用 border-image-width 必须使用 background-position 将图像定位在所需位置。 
 
 
 
  background-size 决定边框的粗细。对于 top&底部边框，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;背景重复：无重复;背景位置：0％0％;}边界底部{背景图像：线性梯度（到右，rgb（139,191,64）25％，rgb（230,27,33）25％，rgb 50％，rgb（124,196,236）50％，rgb（124,196,236）75％，rgb（254,181,17）75％）。 background-size：100％4px;背景重复：无重复;背景位置：0％100％;} bordered-left {背景图像：线性梯度（到底部，rgb（139,191,64）25％，rgb（230,27,33）25％，rgb 50％，rgb（124,196,236）50％，rgb（124,196,236）75％，rgb（254,181,17）75％）。 background-size：4px 100％;背景重复：无重复;背景位置：0％0％;} bordered-right {background-image：linear-gradient（to bottom，rgb（139,191,64）25％，rgb（230,27,33）25％，rgb 50％，rgb（124,196,236）50％，rgb（124,196,236）75％，rgb（254,181,17）75％）。 background-size：4px 100％;背景重复：无重复;背景位置：100％0％;} div {height：100px; width：300px; padding：10px;背景：米色; margin：10px;}  
 
 <！ -  library added仅适用于旧浏览器支持 - >< script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script>< div仅限于顶部< / div>< div class ='bordered-bottom'>仅在左侧边框< / div>< div class ='bordered-right'>仅在右侧边框< / div>   
Is there any way that I can have 4 different colours on one side of a border in CSS? I currently have
#header
{
border-color:#88a9eb;
}
I want to have a border of 4 solid colours, with a 25% split on each, Is this something that is possible?

I want to make a solid version of this without the white bits in between.

解决方案
You can use the border-image property to create a gradient border with 4 colors. Normally gradients move gradually from one color to another and it produces a blur like effect but setting the color-stops (the percentage values) such that the end-point of one color is same as the starting point of the next color makes the colors come to a hard stop and thus end up producing block like effects. 

The border can be set to the required side by changing the border-image-width and the direction of the gradient. For example, top & bottom borders would need the gradient to go from left to right while left & right borders would need the gradient to go from top to bottom.

The gradients use percentage values for the size (and color-stop) and hence they are responsive by default and can adapt automatically even if the container's dimensions change.

The only drawback to using border-image is the poor browser support for this property at present. IE10- do not support this property.



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







For IE10+ support, you could mimic the same behavior by using gradients for the background-image property instead of border-image like in the below snippet.

Unlike with border-image, here the side on which the border is applied cannot be controlled using the border-image-width and we have to use background-position instead to position the image at the required position. 

The background-size determines the thickness of the border. For top & bottom borders, the size in x-axis should be 100% and that in y-axis is the thickness of the border. For left & right borders, the size in y-axis should be 100% and that in x-axis is the thickness of the border.



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





                        
这篇关于CSS边框颜色到4种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！