经常在有些网站看到拼接装饰线条的效果，如下图：
这里公司简介下方的装饰线条左边有一部分是红色的，和一条较长的灰色线拼接在一起了，实际上这里并不是两条线的拼接，而是两条实现边框重叠在一起了，具体做法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {padding:20px;line-height:2;}
#box {width:350px;height:200px;}
.wrap {border-bottom:4px solid #ccc;margin-top:5px;margin-bottom:5px;}
h3 {padding-bottom:3px;border-bottom:4px solid #FF6B37;margin-bottom:-4px;display:inline-block;}
</style>
</head>
<body>
<div id="box">
<div class="wrap">
<h3>公司简介</h3>
</div>
<p>苹果公司于1976年4月1日创立，总部位于加利福尼亚州的库比蒂诺。2016年7月20日《财富》发布了最新的世界500强排行榜，苹果公司名列第九名。</p>
</div>
</body>
</html>这里给h3标题加了一个div包裹着，然后设置这个包裹层的底边框为灰色，然后在设置h3标题的底边框为红色，设置h3的底部外边距margin负值等于边框的宽度，让红色边框刚好和包裹层的灰色边框重叠，然后将h3标题转化成行内块，就实现如图中的效果了。