设置＜hr＞标签的样式

在我们的实际开发中，可能有的时候是避免不了需要用到水平线。但是我们发现它本身的样式又 不太美观，然而当我们直接对它进行设置样式的时候发现无法进行设置，在这个时候我们可以用以下的方法来设置：

 

原始方法设置:

html

<div class="hr">
   <h1>标题</h1>
   <hr>
</div>

css

body{
   background: Gainsboro;
}
hr{
  color: red;
}

效果图

  

现方法

 

html

<div class="hr">
   <h1>标题</h1>
   <hr>
</div>

css

body{
   background: Gainsboro;
}
hr{
  border: none;
  border-top: 10px solid rosybrown;
  border-radius: 5px;
}

效果图

 

 我们可以通过对水平线设置边框的形式来去定义他的样式。