hr如何設置樣式

剛剛寫了一個hr水平線，發現線條有點粗不好看。想改hr的樣式，以爲修改了color或者background之後就能改變水平線顏色，但是發現這樣並不能完全修改顏色，會帶有一點灰色。而且高度設置的1px也感覺比較粗。

hr {
  color: red;
  background: red;
  height: 1px;
  margin: 30px 0;
}

效果如下圖：

其實這裏因爲hr是一個塊級元素，我們看到的灰色是hr的邊框border，紅色是它的background背景色。
所以這裏想實現我們需要的效果應該設置border爲none，然後直接設置border邊框即可。

hr {
  border: none;
  border-top: 1px solid #eee;
  margin-bottom: 30px;
  margin-top: 30px;
}

效果如下：