原理是使用css3的渐变背景，再将高设为分割线的高度
html>
.title{
position:relative;
text-align:center;
}
.title:before,.title:after{
content:"";
width:40%;
height:1px;
position:absolute;
top:50%;
}
.title:before{
background:-webkit-linear-gradient(right,#666,#eee);
background:-o-linear-gradient(left,#666,#eee);
background:-moz-linear-gradient(left,#666,#eee);
background:linear-gradient(toleft,#666,#eee);
left:2px;
}
.title:after{
background:-webkit-linear-gradient(left,#666,#eee);
background:-o-linear-gradient(right,#666,#eee);
background:-moz-linear-gradient(right,#666,#eee);
background:linear-gradient(toright,#666,#eee);
right:2px;
}
这是一个标题
效果图：
