多色边框重复可能与CSS？

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做到这一点？谢谢.

这是我设计的屏幕截图

Answer 1

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

Answer 2

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

Codepen 示例

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

我相信你可以调整调整。