前端技巧CSS实现标题下方拼接装饰线的简单方法

CSS实现标题下方拼接装饰线的简单方法

经常在有些网站看到拼接装饰线条的效果,如下图:

CSS重叠装饰线.png

这里公司简介下方的装饰线条左边有一部分是红色的,和一条较长的灰色线拼接在一起了,实际上这里并不是两条线的拼接,而是两条实现边框重叠在一起了,具体做法如下:

<!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标题转化成行内块,就实现如图中的效果了。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/128.html