刚刚写了一个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;
}
效果如下: