使用 CSS 制作多色边框

Multi Colored Border using CSS

几天前，我遇到了一个情况，我需要使用多色边框，但不想使用图像，因为客户需要在管理面板控制边框颜色。所以我想到了一个解决方案，只用 CSS 来创建多色边框。本教程将指导您完成仅使用 CSS3 盒形阴影创建超酷彩色边框的过程。

HTML

<div id="wrapper">
    <div id="content">
        Awesome Multi-colored Borders using CSS
    </div>
</div>

CSS

#wrapper{ width:100%; background:#ccc; 
    margin-top: 20px;
    border-top: 5px solid blue; 
    border-bottom: 5px solid blue;
    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;
    padding:10px; 
}