CSS制作梦幻彩虹效果
副标题[/!--empirenews.page--]
今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。
XML/HTML Code复制内容到剪贴板
<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> css样式一,使用margin塌陷:
CSS Code复制内容到剪贴板
.box1, .box2, .box3 { width: 200px; } .box1{ margin-bottom: -80px; height:100px; background: blue; } .box2 { margin-bottom:-40px; height:60px; background: #ffff00; } .box3{ height:20px; background: #ff0000; } 效果: css样式二,也是使用的margin塌陷,不过做出来的是弧形的彩虹:
CSS Code复制内容到剪贴板
.box1{ width: 400px; height: 200px; overflow: hidden; } .box1::before{ float: left; display: block; height: 400px; width:400px; border-radius: 100%; border: solid 10px blue; box-sizing: border-box; content: ""; } .box1::after{ margin-top: 10px; margin-left: 10px; display: block; width: 380px; height: 380px; (编辑:西双版纳站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |