Question

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

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

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

我想在没有白色位的情况下制作一个可靠的版本。

Answer 1

您可以使用border-image属性创建4种颜色的渐变边框。通常，渐变从一种颜色逐渐移动到另一种颜色，它会产生模糊效果，但设置color-stops（百分比值），使得一种颜色的终点与下一种颜色的起点相同，使得颜色变得坚硬，因此最终会产生像块一样的效果。

通过更改border-image-width和渐变的方向，可以将边框设置为所需的边。例如，top＆amp;底部边框需要渐变从左边到右边，而左边和右边是右边框需要渐变从顶部到底部。

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

使用border-image的唯一缺点是目前此属性的poor browser support。 IE10-不支持此属性。

＆＃13;

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

＆＃13;

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

＆＃13;

对于IE10 +支持，您可以使用background-image属性的渐变而不是border-image来模仿相同的行为，如下面的代码段所示。

与border-image不同，此处使用border-image-width无法控制应用边框的一侧，我们必须使用background-position将图像定位在所需位置。

background-size确定边框的粗细。对于 top＆amp;底部边框，x轴的大小应为100％，y轴的大小为边框的粗细。对于左和右右边框，y轴的尺寸应为100％，x轴的尺寸为边框的厚度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用box-shadow和after psuedo-element来执行此操作

我做了什么：

我首先在底部创建了一个:after元素，然后将box-shadow水平添加到不同的colors

如果要更改边框的强度，只需为:after元素

添加更多高度

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

较大的div上的相同内容将是这样的

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

Answer 3

我已经采取了哈里所做的并修改它以满足我的需要。我现在有：

  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 4

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

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

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

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

Answer 5

你可以尝试这个：

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


}

www.json.org

Answer 6

最佳解决方案是使用linear-gradient。当然。但是，作为初学者的人可能会发现这个解决方案很有用。通过使用2-3-4种颜色甚至更多，这是正确的方法。对于这个问题不是最好的解决方案，但也许有人在阅读本文时想要更好地理解带边框的颜色是如何工作的。

＆＃13;

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

＆＃13;

CSS边框颜色分为4种颜色

6 个答案: