Html css 可以重复多色边框吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19299006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
multi colored border repeating possible with css?
提问by OneEightLeft
I've searched and can only find multiple border issues. I need to make one border with 4 colors that repeat.
我已经搜索过，只能找到多个边界问题。我需要用重复的 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>
I did everything inline so it's easier to understand
我做了所有内联所以更容易理解
I'd like the border-top and bottom to be 4 different colors repeating.
我希望边框顶部和底部是 4 种不同的颜色重复。
1 2 3 4 1 2 3 4 1 2 3 4
1 2 3 4 1 2 3 4 1 2 3 4
Is this possible with css? I know i could do something like
这可以用 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>
But i'd like to see if there is a better way of doing this with css? THanks.
但我想看看是否有更好的方法用 css 来做到这一点？谢谢。
This is a screen shot of my design
这是我设计的屏幕截图
回答by balapa
Actually, you can use pure CSS for this. You just need list item, then display to inline block, and add every list a different color.
实际上，您可以为此使用纯 CSS。您只需要列表项，然后显示到内联块，并为每个列表添加不同的颜色。
回答by Adam Thomas
I created a CodePen exampleshowing one way of doing this with CSS border-image. It's fairly well supported and does what you are looking for with CSS.
我创建了一个CodePen 示例，展示了使用 CSS 执行此操作的一种方法border-image。它得到了相当好的支持，并且可以使用 CSS 完成您正在寻找的内容。
HTML:
HTML：
<div class="fancy-border">
my content
</div>
CSS:
CSS：
.fancy-border {
border: 4px solid;
border-image: url("http://s12.postimg.org/kebji5qfd/border.png") 1 stretch repeat;
}
Chris Coyier has a nice post at CSS Tricks about border-image. http://css-tricks.com/understanding-border-image/
Chris Coyier 在 CSS Tricks 上有一篇关于边框图像的好文章。http://css-tricks.com/understanding-border-image/
回答by vals
The future way of doing that would be border-image, as said in other answers.
正如其他答案中所说，未来的做法将是边界图像。
An alternative in more short term would be using pseudo-elements, with gradients:
更短期的替代方法是使用具有梯度的伪元素：
CSS
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
演示
回答by Paulie_D
No need for wrappers, multiple 'borders' are possible by using box-shadow
不需要包装器，可以使用多个“边框” 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;
}
I'm sure you could tweak to adjust.
我相信你可以调整来调整。
回答by daGUY
Instead of border-color, you could use border-imagecombined with CSS3 gradientsto achieve an effect like that.
代替border-color，您可以border-image结合使用CSS3 渐变来实现这样的效果。
For example, here's a box with a border that fades between red, blue, yellow, and green horizontally: http://jsfiddle.net/8d6dt/
例如，这是一个边框在红色、蓝色、黄色和绿色之间水平渐变的框：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;
}
回答by daGUY
I might have a solution for your problem. This solution is for a div with a border with 4 colors. It involves using :before and :after.
我可能有解决您的问题的方法。此解决方案适用于带有 4 种颜色边框的 div。它涉及使用 :before 和 :after。
CSS
CSS
.test { /* this is our div with multiple borders */
position: relative;
width: [some width];
background: [some color, image, ...];
min-height: 4px;
}
Now, as you might have seen, we've set the position to relative. The thing is, this div is going to serve as a parent for another div that will stick to the bottom of it's parent:
现在，您可能已经看到，我们已将位置设置为相对位置。问题是，这个 div 将作为另一个 div 的父级，该 div 将粘在其父级的底部：
.stickToBottom {
position: absolute;
bottom: 0;
top: 100%;
}
"Why did we make this div?", you might wonder. Well, as said before, we are going to work with :before and :after in order to get a border with 4 colors. It would be impossible to do it without this div.
“我们为什么要制作这个 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;
}
And here is why: if we didn't include the stickToBottom div, and we were to say this:
原因如下：如果我们不包括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;
}
the black and green borders would be located at the top of the div, while the yellow and the purple borders would be located at the bottom of the div, and there would be no way to fix this. By adding the stickToBottom div, we can achieve what you want: all borders will be located at the bottom.
黑色和绿色边框将位于 div 的顶部，而黄色和紫色边框将位于 div 的底部，并且无法解决此问题。通过添加stickToBottom div，我们可以实现您想要的：所有边框都将位于底部。
HTML
HTML
<div class="test">
<p>test</p>
<div class="bottom"></div>
</div><!-- /test -->
回答by rafaelcastrocouto
You can use box-shadow but its not fully supported
您可以使用 box-shadow 但不完全支持
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;
回答by SKeurentjes
U could use multiple box-shadows.
你可以使用多个框阴影。
#wrapper {
box-shadow: 0 0 0px 5px purple,
0px 0px 0px 10px goldenrod,
0px 0px 0px 15px blue,
0px 0px 0px 20px orange;
}
Example: http://jsfiddle.net/f7JT7/
