经常在有些网站看到拼接装饰线条的效果,如下图:
这里公司简介下方的装饰线条左边有一部分是红色的,和一条较长的灰色线拼接在一起了,实际上这里并不是两条线的拼接,而是两条实现边框重叠在一起了,具体做法如下:
<!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标题转化成行内块,就实现如图中的效果了。