CSS实现重叠线效果，上次做某个小项目设计给设计的，我考虑的有负margin，浮动和定位等方法做，但是效果都不是很好，兼容问题很头疼。偶尔看到新版腾讯有这种样式，只是宽度不一样，看了下代码很简单，分享出来。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS实现重叠线效果</title>
<style type="text/css">
*{padding:0;margin:0;}/*demo偷懒充值样式，实际项目切勿模仿*/
.line{border-bottom:2px solid #EBEBEB;margin-top:10px;margin-bottom:10px;}
/*
margin:10px 0;在实际项目中因为左右0px的权重影响其他样式，多做就知道了。
*/
h2{border-bottom:2px solid skyblue;font-size:14px;line-height:20px;
display:inline-block;
*display:inline;
*zoom:1;
/*兼容inline-block----这里可以以用浮动代替*/
/*inline-block遇到text-indent会有兼容问题，原因是 ie6/7 其实还是inline*/
margin-bottom:-2px;
}
</style>
</head>
<body>
<div>
<h2>蓝悦</h2>
</div>
<div>
<h2>蓝色理想</h2>
</div>
<div>
<h2>前端开发板块</h2>
</div>
<div>
<h2>写一个简单的DEMO</h2>
</div>
</body>
</html>效果如图：
