多重彩色边框重复可能与css？ [英] multi colored border repeating possible with css?

问题描述

我已搜索，只能找到多个边框问题。我需要做一个边界与4种颜色重复。

 < div id =wrapperstyle =width：100％; background：#ccc; border-top：thick实心蓝色;边框底部：粗实蓝色;填充：10px;> 
< div id =content> 
这是一些内容。 
< / div> 
< / div> 
  

I've searched and can only find multiple border issues. I need to make one border with 4 colors that repeat.

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

I did everything inline so it's easier to understand

I'd like the border-top and bottom to be 4 different colors repeating.

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

Is this possible with css? I know i could do something like

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

This is a screen shot of my design

解决方案

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.

I've made the example for you.

http://codepen.io/balapa95/pen/eyxzI

这篇关于多重彩色边框重复可能与css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！