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

我做的一切都是内联的，这样更容易理解

我希望 border-top 和 bottom 有 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。您只需要列表项，然后显示到内联 block ，并为每个列表添加不同的颜色。