5

我已经搜索过，只能找到多个边界问题。我需要用 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？谢谢。

这是我正在寻找的边界

这是我设计的屏幕截图

4

8 回答 8

8

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

于 2014-02-16T11:27:24.913 回答
4

我创建了一个CodePen 示例，展示了使用 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 上有一篇关于边框图像的好帖子。http://css-tricks.com/understanding-border-image/

于 2013-10-10T15:11:11.807 回答
3

正如其他答案中所说，未来的做法将是边界图像。

更短期的替代方法是使用带有渐变的伪元素：

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

演示

于 2013-10-10T18:03:52.353 回答
3

不需要包装器，可以使用多个“边框”box-shadow

代码笔示例

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

我相信你可以调整来调整。

于 2013-10-10T14:53:59.610 回答
2

代替border-color，您可以border-image结合使用CSS3 渐变来实现这样的效果。

例如，这是一个边框在红色、蓝色、黄色和绿色之间水平渐变的框：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;
}
于 2013-10-10T15:23:10.380 回答
0

您可以使用 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

于 2013-10-10T14:55:10.707 回答
0

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

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

于 2013-10-10T14:56:15.777 回答
0

对于你的问题，我可能有一个解决方案。此解决方案适用于具有 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 的父级，该 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 -->
于 2014-01-30T18:18:28.863 回答