html如何修改hr水平直線的粗細

hr是常見的超文本標簽，是一條水平直線，要設置該直線變粗一些。可以先把hr本身的border隱藏掉，然后設置border-top-width，也就是只留上邊框，如圖：hr的默認高度height是0，所以不會顯示矩形邊框，實際hr是有邊框的，而且是上下左右四個邊框值為1的，可以在瀏覽器里查看下默認hr的各種邊距和邊框，但height設置高之后，就可以看出hr本身的帶的矩形邊框。
必須要把hr本身的border設置為none，因為hr默認是有個四邊為1的邊框的，去掉其他個邊框，然后設置只對上邊框進行設置。

hr一般用於水平直線，所以不需要給hr加這種矩形邊框，可以只設置上邊框，上邊框是一個真正的一條線，然后設置上邊框的寬度（粗細），就可以設置粗一些的水平直線。
代碼：border:none;border-top:30px solid #00ff00;
上面這個代碼是簡寫形式，border-top后面跟的是三個參數分別寫：
分別寫代碼：border:none;border-top-width:30px;border-top-style:solid;border-top-color:#00ff00;

測試代碼：

<div id="d1">
<p style="margin:0;">&nbsp;（1）</p><!--默認height是0-->
<hr style="border-color:#0000ff;" >

<p style="margin:0;">&nbsp;（2）</p><!--高度不為0，顯示出邊框-->
<hr style="height:5px;border-color:#0000ff;"/>

<p style="margin:0;">&nbsp;（3）</p><!--不顯示邊框，設置上邊框30px 實線 顏色-->
<hr style="border:none;border-top:30px solid #00ff00;" />

<p style="margin:0;">&nbsp;（4）</p><!--同（3），分開寫模式-->
<hr style="border:none;border-top-width:30px;border-top-style:solid;border-top-color:#00ff00;" />

-----------------------------------------------------------------------------------------------------
<p style="margin:0;">&nbsp;（5）錯誤</p><!--沒把border設置為none-->
<hr style="border-top:30px solid #00ff00;" />

<p style="margin:0;">&nbsp;（6）錯誤</p><!--錯誤寫法的1,設置border-style而不是border-top-style-->
<hr style="border:none;border-top-width:30px;border-style:solid;border-top-color:#00ff00;" />
</div>

圖示：

如圖：
默認hr的默認樣式：上邊距margin 8px，下邊距margin 8px，左右無margin，上下左右border都為1px，高為0.
給默認hr加了height:5px的樣式：其余同上，高度變為5px（由於高度改變，四周的1px的邊框都顯現出來）
設置單上邊線並加粗的樣式：margin和高同默認，左右和下邊無邊框，上邊框為 30px。