logo标签列表

将CSS边框颜色分成4种颜色

htmlcssborder
10

有没有办法在CSS中将边框的一侧分为4种不同的颜色？我目前有以下代码：

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

我想要一个由4种纯色组成的边框，每个颜色占25%，这种效果是否可行？

我想制作一个没有白色间隔的纯色版本。

图片描述

所有四个边还是只有一个边？ - Harry
只在边界的一侧上。 - Peter Jennings
6个回答
12
您可以使用border-image属性创建带有4种颜色的渐变边框。通常，渐变从一种颜色逐渐过渡到另一种颜色，并产生模糊效果，但是通过设置color-stops（百分比值），使得一种颜色的终点与下一种颜色的起点相同，使得颜色停止并产生块状效果。
可以通过更改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+，您可以通过使用渐变来模仿与以下代码片段中的border-image不同的行为，而是将其用于background-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>

1
非常全面的回答，很棒你为提问者添加了四个方面的示例。 - Peter
8
你可以使用box-shadow和after伪元素来实现这个效果。
我首先在底部创建了一个:after元素，然后水平添加了不同颜色的box-shadow。
如果你想改变边框的强度，只需给: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>

1
真的是非常有创意的方法！<3 - Pogrindis
如果宽度不是固定的，而是以百分比为单位，这个会起作用吗？ - Vucko
不，我认为那是不可能的 @Vucko - Akshay
4

我已经采用了哈利的方法并进行了修改以适应我的需求。现在我拥有：

  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;

这是我需求中最好的解决方案。

1
很好，你能够修改它以适应你的需求。感谢笔记通常在问题/答案中不是必需的，因此我已将其删除。不要忘记标记一个答案为被接受的（可以是你自己的答案或我的答案或这里的任何其他答案），因为这是SO标记问题为已解决/已回答的方式 :) - Harry
1

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

更简单但仍然酷炫的解决方案：尝试使用border-image。（请参见Harry的答案）

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

.container {
    background-image: url(image.png);
    background-repeat: repeat-x;
    background-position: bottom left;
}
1
你可以试试这个：
.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;


}

演示

4
我知道这是一个简单的问题，你本可以自己编写代码，但你使用了相同的width、相同的border-image-slice和相同的颜色顺序，这让人怀疑你抄袭了别人的作品。请注意修改以避免此类情况。 - Harry
0

最好的解决方案是使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接