css波浪分割线,css实现分割线(示例代码)

.demo {

width: 600px;

}

.line_01 {

padding: 0 20px 0;

margin: 20px 0;

line-height: 1px;

border-left: 200px solid #ddd;

border-right: 200px solid #ddd;

text-align: center;

}

.line_02 {

height: 1px;

border-top: 1px solid #ddd;

text-align: center;

}

.line_02 span {

position: relative;

top: -12px;

background: #fff;

padding: 0 20px;

}

.line_03 {

width: 600px;

}

.line_03 b {

background: #ddd;

margin-top: 4px;

display: inline-block;

width: 180px;

height: 1px;

_overflow: hidden;

vertical-align: middle;

}

.line_03 span {

display: inline-block;

width: 220px;

vertical-align: middle;

text-align: center;

}

.line_04 {

width: 600px;

}

.line_04 {

overflow: hidden;

_zoom: 1;

}

.line_04 b {

background: #ddd;

margin-top: 12px;

float: left;

width: 26%;

height: 1px;

_overflow: hidden;

}

.line_04 span {

padding: 0 10px;

width: 32%;

float: left;

text-align: center;

}

.line_05 {

letter-spacing: -1px;

color: #ddd;

}

.line_05 span {

letter-spacing: 0;

color: #222;

margin: 0 20px;

}

小小分隔线单标签实现

小小分隔线 巧用色实现

小小分隔线 inline-block实现

小小分隔线 浮动来实现

——————————— 小小分隔线 字符来实现————————————