面試中有個(gè)有趣的題目~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;
}要求，基于這三個(gè)Div，添加CSS，做出一列有5個(gè)Div的效果，并且背景色依次為藍(lán)色，黃色，紅色，黃色，藍(lán)色。提示：利用css maring塌陷效果我是用:before, :after添加Div做的。但是，感覺好像不是正確答案，雖然效果一樣。demo：http://jsfiddle.net/etianqq/ocdv1xrh/點(diǎn)擊預(yù)覽不知道是否有更優(yōu)的解法？？？尤其是提示，“利用css maring塌陷效果”。雖然明白塌陷的概念，但是如何利用，就不得而知了。
2 回答
紅糖糍粑
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
一個(gè)div就夠，用CSS3徑向漸變。
div{
width: 200px;
height: 100px;
background: -webkit-radial-gradient(50% 100%,blue 0px, blue 20px, red 20px, red 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px,#fff 100px);
border-radius: 100% 100% 0 0;
}
largeQ
TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊
.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;
}
添加回答
舉報(bào)
0/150
提交
取消