一、横线
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/720367fa02145d76288afded90cb38ba.png)
<div class="line" />
/* 横线 */
.line{
float:right;
width: 100%;
height: 1px;
margin-top: -0.5em;
background:#d4c4c4;
position: relative;
text-align: center;
}
二、竖线
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f30f8830f2e7f28a6c73d450081f0c1c.png)
<div class="line" />
/* 竖线 */
.line{
float: left;
width: 0.1em;
height: 2.5em;
margin-right: 1em;
margin-left: 3.5em;
background:#f3f3f3;
}
三、分割线
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e6c57ae6c5c0bd1862c6649aa6b8aab6.png)
<div class="tableLine"><span class="midText">我是华丽的分割线</span></div>
.tableLine {
position: relative;
margin: 0 auto;
width: 600px;
height: 1px;
background-color: #d4d4d4;
text-align: center;
font-size: 16px;
color: rgba(101, 101, 101, 1);
}
.midText {
position: absolute;
left: 50%;
background-color: #ffffff;
padding: 0 15px;
transform: translateX(-50%) translateY(-50%);
}