Question

我搜索过，只能找到多个边框问题。我需要制作一个有4种颜色重复的边框。

<div id="wrapper" style="width:100%; background:#ccc; border-top: thick solid blue; border-bottom: thick solid blue; padding:10px;">
<div id="content">
This is some content.
</div>
</div>

http://jsfiddle.net/f7JT7/

我做了一切内联，所以更容易理解

我希望边框顶部和底部重复4种不同的颜色。

1 2 3 4 1 2 3 4 1 2 3 4

这可以用css吗？我知道我可以做类似

的事情

<div>
<div id="red" style="width:50px;"></div><div id="green" style="margin-left:50px; width:50px;"></div><div id="purple" style="margin-left:100px; width:50px;"></div>
</div>

但是我想看看有没有更好的方法用css做到这一点？感谢。

This is the border i'm looking for

这是我设计的屏幕截图

Answer 1

实际上，你可以使用纯CSS。您只需要列表项，然后显示为内联块，并为每个列表添加不同的颜色。

Answer 2

我创建了一个CodePen example，显示了使用CSS border-image执行此操作的一种方法。它得到了相当好的支持，可以用CSS来完成你想要的工作。

HTML：

<div class="fancy-border">
  my content
</div>

CSS：

.fancy-border {
  border: 4px solid;
  border-image: url("http://s12.postimg.org/kebji5qfd/border.png") 1 stretch repeat;
}

Chris Coyier在CSS Tricks上有一篇关于border-image的好文章。 http://css-tricks.com/understanding-border-image/

Answer 3

不需要包装器，使用box-shadow

可以实现多个'边框'

Codepen Example

#content {
  width:100px;
  height:100px;
  margin:25px;
  box-shadow:
  0 0 0 2px green,
  0 0 0 4px white, 
  0 0 0 6px blue,
  0 0 0 8px orange,
  0 0 0 10px green,
  0 0 0 12px red,
  0 0 0 14px blue;
  0 0 0 16px black;
}

我相信你可以调整调整。

Answer 4

未来的做法是边缘图像，正如其他答案所述。

更短期的替代方案是使用伪元素，渐变：

CSS

.test {
  width: 500px;
  height: 100px;
  background-color: #ccc;
  position: relative;
}

.test:before, .test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  height: 10px;
  background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
  background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
  background-size: 80px;
}

.test:before {
  top: 0px;
}
.test:after {
  bottom: 0px;
}

demo

Answer 5

而不是border-color，您可以使用border-image与CSS3 gradients相结合来实现这样的效果。

例如，这是一个框，边框在水平方向上呈现红色，蓝色，黄色和绿色之间的淡入淡出：http://jsfiddle.net/8d6dt/

div {
    border-image: -webkit-linear-gradient(left, red, blue 33%, yellow 66%, green) 1%;
    border-width: 20px;
    height: 200px;
    width: 200px;
}

Answer 6

您可以使用box-shadow但不完全支持

http://jsfiddle.net/f7JT7/1/

box-shadow: 
  0  -5px 0 red,    0  5px 0 red,  
  0 -10px 0 yellow, 0 10px 0 yellow,
  0 -15px 0 green,  0 15px 0 green,
  0 -20px 0 purple, 0 20px 0 purple;

http://caniuse.com/css-boxshadow

Answer 7

你可以使用多个盒子阴影。

    #wrapper {
        box-shadow: 0 0 0px 5px purple, 
        0px 0px 0px 10px goldenrod, 
        0px 0px 0px 15px blue, 
        0px 0px 0px 20px orange;
    }

实施例： http://jsfiddle.net/f7JT7/

Answer 8

我可能会为您的问题找到解决方案。此解决方案适用于带有4种颜色边框的div。它涉及使用：before和：after。

CSS

.test { /* this is our div with multiple borders */
    position: relative;
    width: [some width];
    background: [some color, image, ...];
    min-height: 4px;
}

现在，正如您可能已经看到的那样，我们已将位置设置为相对位置。问题是，这个div将作为另一个div的父级，它将坚持它的父母的底部：

.stickToBottom {
    position: absolute;
    bottom: 0;
    top: 100%;
}

“我们为什么要制作这个div？”，你可能想知道。好吧，如前所述，我们将使用：before和：after以获得4种颜色的边框。没有这个div就不可能做到。

.test:after, .test:before, .stickToBottom:before, .stickToBottom:after {
    content: "";
    float: right;
    height: 4px;
}

.stickToBottom:before, [dir="ltr"] .stickToBottom:after {
    float: left;
    border-left: 35px solid black;
    border-width: 125px;
    border-right: 34px solid green;
    border-width: 125px;
}

.test:after, [dir="rtl"] .test:before {
    border-left: 35px solid yellow;
    border-width: 125px;
    border-right: 34px solid purple;
    border-width: 125px;
}

原因如下：如果我们没有包含stickToBottom div，我们就这么说：

.test:before, [dir="ltr"] .test:after {
    float: left;
    border-left: 35px solid black;
    border-width: 125px;
    border-right: 34px solid green;
    border-width: 125px;
}

.test:after, [dir="rtl"] .test:before {
    border-left: 35px solid yellow;
    border-width: 125px;
    border-right: 34px solid purple;
    border-width: 125px;
}

黑色和绿色边框将位于div的顶部，而黄色和紫色边框将位于div的底部，并且无法解决此问题。通过添加stickToBottom div，我们可以实现您想要的效果：所有边框都位于底部。

HTML 的

<div class="test">
    <p>test</p>
    <div class="bottom"></div>
</div><!-- /test -->

多色边框重复可能与CSS？

8 个答案:

demo