0
点赞
收藏
分享

微信扫一扫

设置<hr>标签的样式

岛上码农 2022-04-14 阅读 51
css

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

 

原始方法设置:

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

效果图

 

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

举报

相关推荐

0 条评论