当前位置：首页 > 网页制作 > CSS > 详细页面

css实现文章分割线样式的多种方法总结

时间：2021-04-21来源：www.pcxitongcheng.com作者：电脑系统城

这篇文章整理css如何实现文章分割线的多种方式，分割线在页面中可以起到美化作用，那么就来看看使用css实现分割线样式的多种方法。效果如下：

方式一：单个标签实现分隔线：

html:

1	`<div` `class="line_01">小小分隔线单标签实现</div>`

css:

1
2
3
4
5
6
7
8 .demo_line_01{
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 190px solid #ddd;
border-right: 190px solid #ddd;
text-align: center;
}

优点：代码简洁

方式二、巧用背景色实现分隔线：

html:

1	`<div` `class="line_02"><span>小小分隔线巧用色实现</span></div>`

css:

1
2
3
4
5
6
7
8
9
10
11 .demo_line_02{
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.demo_line_02 span{
position: relative;
top: -8px;
background: #fff;
padding: 0 20px;
}

优点：代码简洁，可自适应宽度

方式三、inline-block实现分隔线：

html:

1	`<div` `class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>`

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 .demo_line_03{
width:600px;
}
.demo_line_03 b{
background: #ddd;
margin-top: 4px;
display: inline-block;
width: 180px;
height: 1px;
_overflow: hidden;
vertical-align: middle;
}
.demo_line_03 span{
display: inline-block;
width: 220px;
vertical-align: middle;
}

方式四、浮动实现分隔线：

html:

1	`<div` `class="line_04"><b></b><span>小小分隔线浮动来实现</span><b></b></div>`

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 .demo_line_04{
width:600px;
}
.demo_line_04{
overflow: hidden;
_zoom: 1;
}
.demo_line_04 b{
background: #ddd;
margin-top: 8px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;
}

方式五、利用字符实现分隔线：

html:

1	`<div` `class="line_05">———————————<span>小小分隔线字符来实现</span>————————————</div>`

css:

1
2
3
4
5
6
7
8
9 .demo_line_05{
letter-spacing: -1px;
color: #ddd;
}
.demo_line_05 span{
letter-spacing: 0;
color: #222;
margin:0 20px;
}