在网站建设中尝尝会遇到这样那样的分割线，比如：分割线———————— --------分割线---------- 等等，这些分割线用css怎么实现呢，下面就给大家介绍一些常用方法
一、利用相对定位是文字的位置相对原来的位置移动
demo1；
.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;}
<div class="demo_line_02"><span>分割线</span></div>
调整.demo_line_02里的text-align值可以实现
以上三种样式的分割线
二、利用border属性
demo:
.demo_line_01{padding: 0 20px 0;margin: 20px 0;line-height: 1px;height:1px;border-left: 400px solid #ddd;border-right: 200px solid #ddd;text-align: center;}
<div class="demo_line_02"><span>分割线</span></div>
三、利用inline-block实现，这种方法文字部分可以换行
demo：
.demo_line_03{width:800px;}
.demo_line_03 b{background: #ccc;margin-top: 4px;display: inline-block;width: 200px;height: 1px;_overflow: hidden;vertical-align: middle;}
.demo_line_03 span{display: inline-block;width: 200px;vertical-align: middle;}
<div class="demo_line_03"><b></b><span>分割线分割线分割线分割线分割线分割</span><b></b></div>