在網站建設中嘗嘗會遇到這樣那樣的分割線，比如：分割線———————— --------分割線---------- 等等，這些分割線用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>