CSS边框颜色分为4种颜色

Question

有没有什么方法可以在CSS的边框的一边有4种不同的颜色？我现在有

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

我希望有4种纯色的边框,每种颜色分开25%,这是可能的吗？

我希望在没有白色位的情况下制作一个可靠的版本.

Answer 1

您可以使用该border-image属性创建具有4种颜色的渐变边框.通常,渐变从一种颜色逐渐移动到另一种颜色,它会产生模糊效果,但设置颜色停止(百分比值),使得一种颜色的终点与下一种颜色的起点相同,使颜色变为颜色一个硬停止,从而最终产生块效果.

通过改变border-image-width渐变的方向,可以将边框设置为所需的边.例如,顶部和底部边框需要渐变从左到右,而左右边框需要渐变从上到下.

渐变使用大小(和颜色停止)的百分比值,因此它们默认响应,即使容器的尺寸发生变化也能自动调整.

使用的唯一缺点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;
}
.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 2

您可以使用box-shadow和after psuedo-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 3

复杂但很酷的解决方案：使用 SVG（例如<svg>标签），添加 4 个路径，分配不同的stroke-dasharray和stroke-color属性。

更简单但仍然很酷的解决方案：尝试border-image。（见哈利的回答）

如果您只需要一个边框，则非常简单的解决方案：创建一张图像，但将其作为背景图像，仅在一个轴上重复它，将其放置在容器的边缘，例如（对于底部边框）

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