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;
}

效果如下：