加入收藏 | 设为首页 | 会员中心 | 我要投稿 西双版纳站长网 (https://www.0691zz.com.cn/)- 数据计算、IT业界、服务器、教程、云日志!
当前位置: 首页 > 服务器 > 系统 > 正文

CSS制作梦幻彩虹效果

发布时间:2020-03-17 01:57:17 所属栏目:系统 来源:站长网
导读:副标题#e# 今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。 自己之前还没怎么遇到过这个问题,正好来研究一下。 XML/HTML Code复制内容到剪贴板 divclass=box1/div divclass=box2/div divclass=box3/div divclass=box4/div 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制作梦幻彩虹效果

 

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;   

(编辑:西双版纳站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读