html渐变线条代码,使用css3制作渐变分割线

原理是使用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(to left, #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(to right, #666 , #eee);

right: 2px;

}

这是一个标题

效果图：