使用css創建水平彩色條帶

Question

在我的網頁中，我需要在徽標文本下面放置一些寬度爲水平的彩色條帶。

我試圖用這個CSS：

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

與這個網站：

<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

你知道的HTML標籤<hr>的？你可以設計它的風格，它可能更具語義。

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

Answer 3

你試過在你的css上使用background-color:#fff嗎？

Answer 4

的邊境僅適用於div的底部：

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

http://jsfiddle.net/Y4dUD/

然後調整2px到你需要