使用css创建水平彩色条带

Question

在我的网页中，我需要在徽标文字下方放置一些宽度为水平的彩色条带。

我尝试使用这个css：

#colorstrip{
    width: 100%; height: 2px;
    border-style: solid;
    border-color: white;
}

使用这个html：

<span id="logo"> My site</span>
<div id="colorstrip"/>

但它显示了一个白色矩形。如何使它成为一个填充的？或者我是否必须使用图像（可能是白色方块）并将其作为div的背景重复使用？

使用div来显示这个细条是正确的方法吗？ 你有什么建议吗？

Answer 1

如果你想填写它，请使用：

#colorstrip{
    width: 100%; height: 2px;
    border-style: solid;
    border-color: white;
    background-color: white;
}

Answer 2

只需将边框应用于div的底部：

#colorstrip{
    height: 0px;
    border-bottom:solid 2px red;
}​

http://jsfiddle.net/Y4dUD/

然后将2px调整到您需要的高度

Answer 3

您是否知道HTML <hr>代码？你可以设计这个样式，它可能更具语义性。

<style type="text/css">
 hr {
 color:#FFFFFF;
 border:none;
 height:2px;
 }
 </style>

Answer 4

你有没有尝试在你的CSS上使用background-color:#fff？