CSS实现重叠线效果的方法

2019-10-12 08:12:22来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

重叠线效果我们经常可以在网页上应用到,重叠线效果的实现方法也有很多,但是仍有很多小伙伴们分不清具体要如何实现,那么我们现在就跟小编一起去学CSS实现重叠线效果的方法。

复制代码
代码如下:

?


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></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 class="line">
<h2>蓝悦</h2>
</div>
<div class="line">
<h2>蓝色理想</h2>
</div>
<div class="line">
<h2>前端开发板块</h2>
</div>
<div class="line">
<h2>写一个简单的DEMO</h2>
</div>
</body>
</html>
上文中小编为大家截图介绍了CSS实现重叠线效果的方法,如果你觉得本文对你有帮助的话就请关注我们爱站技术频道吧!

原文链接:https://js.aizhan.com/web_authoring/css/9415.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS截断字符串的实用方法

下一篇:css中换行的常用方式