开发者社区> 问答> 正文

如何用三个Div实现彩虹效果?

HTML code:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

CSS:

.box1, .box2, .box3 {
    width: 200px;
    height:40px;
}
.box1, .box3{
    margin: 20px;
}

.box2 {
    margin:40px 20px;
}

要求,基于这三个Div,添加CSS,做出一列有5个Div的效果,并且背景色依次为蓝色,黄色,红色,黄色,蓝色。
提示:利用css maring塌陷效果

我是用:before, :after添加Div做的。但是,感觉好像不是正确答案,虽然效果一样。
demo:http://jsfiddle.net/etianqq/ocdv1xrh/点击预览

展开
收起
杨冬芳 2016-06-06 18:42:32 2151 0
1 条回答
写回答
取消 提交回答
  • IT从业

    只不过我写的margin-bottom,这就是题目说的margin塌陷

    .box1, .box2, .box3 {
        width: 200px;
    }
    
    .box1 {
        background: green;
        height: 200px;
        margin-bottom: -160px;
    }
    .box2 {
        background: yellow;
        height: 120px;
        margin-bottom: -80px;
    }
    .box3 {
        background: red;
        height: 40px;
    }
    2019-07-17 19:29:16
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载