澳门新葡亰赌全部网址▎导航站

高清视频,说到margin的塌陷的问题

来源:http://www.tackaberrytimes.com 作者:生活家居 人气:63 发布时间:2019-10-02
摘要:@本叔就是本切鸣:先看效果: CSS制作彩虹效果,css制作彩虹 今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。 自己之前还没怎么遇到过这个问题,正好来研究一下。

@本叔就是本切鸣:先看效果:

CSS制作彩虹效果,css制作彩虹

今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。

自己之前还没怎么遇到过这个问题,正好来研究一下。

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

css样式一,使用margin塌陷:

.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;
}

效果:

图片 1

 

css样式二,也是使用的margin塌陷,不过做出来的是弧形的彩虹:

.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;
            border: solid #ffff00 10px;
            border-radius: 100%;
            box-sizing: border-box;
            content: "";
        }
        .box2{
            float: left;
            margin-top: -180px;
            margin-left: 20px;
            width: 360px;
            height: 180px;
            overflow: hidden;
        }
        .box2::before{
            float: left;
            display: block;
            margin: 0;
            width: 360px;
            height: 360px;
            border-radius: 100%;
            border: solid 10px #ff0000;
            box-sizing: border-box;
            content: "";
        }
        .box2::after{
            display: block;
            margin-top: 10px;
            margin-left: 10px;
            width: 340px;
            height: 340px;
            border-radius: 100%;
            border: solid 10px #ffff00;
            box-sizing: border-box;
            content: "";
        }
        .box3{
            margin-top: -160px;
            margin-left: 40px;
            width: 340px;
            height: 160px;
            overflow: hidden;
        }
        .box3::before{
            float: left;
            display: block;
            width: 320px;
            height: 320px;
            border: solid 10px blue;
            border-radius: 100%;
            box-sizing: border-box;
            content: "";
        }

效果:

图片 2

css样式三,使用的是box-shadow:

.box4{
            width: 200px;
            height: 200px;
            box-shadow: 0 10px 0 red,0 20px 0 yellow, 0 30px 0 green,0 40px 0 blue,0 50px 0 purple;
        }

效果:

图片 3

CSS样式四,使用position:absolute来实现,感觉这种是最常见的了

.box1{
            position: absolute;
            width: 200px;
            height: 100px;
            background: #008aff;
        }
        .box2{
            position: absolute;
            margin-top: 20px;
            width: 200px;
            height: 60px;
            background: #ffff00;
        }
        .box3{
            position: absolute;
            margin-top: 40px;
            width: 200px;
            height: 20px;
            background: #ff6633;
        }

效果:

图片 4

CSS样式五,使用radial-gradient:

 .box4{
            width: 260px;
            height: 130px;
            overflow: hidden;
        }
        .box5{
            width: 260px;
            height: 260px;
            border-radius: 100%;
            background: radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
            background: -moz-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
            background: -webkit-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
        }

图片 5

 另外附上关于css负边距的文章链接:

 

今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。 自己之前还没怎么遇到过这个问题,正...

图片 6

练习素材:

高清视频:

本文由澳门新葡亰赌全部网址▎导航站发布于生活家居,转载请注明出处:高清视频,说到margin的塌陷的问题

关键词:

最火资讯