`

使用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>

效果图：
分享到：
| jQuery动画插件： Velocity.js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics