使用css3制作渐变分割线
http://my.oschina.net/hwxn/blog/615201
原理是使用css3的渐变背景，再将高设为分割线的高度
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<p class="title">这是一个标题</p>
</body>
</html>效果图：
相关推荐
Ladyseven 2020-10-22
李鴻耀 2020-08-17
yaodilu 2020-08-03
luofuIT成长记录 2020-09-22
Mynamezhuang 2020-09-18
zhoujiyu 2020-06-28
89510194 2020-06-27
CaiKanXP 2020-06-13
MaureenChen 2020-06-12
Phoebe的学习天地 2020-06-07
淡风wisdon大大 2020-06-06
buttonChan 2020-06-06
xtuhcy 2020-05-20
AlisaClass 2020-05-18
赵家小少爷 2020-05-16
nicepainkiller 2020-05-05