使用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;
}?

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