CSS制作各種樣式的彩虹效果
發(fā)布時(shí)間：2016-07-06 16:08:10 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS制作各種樣式的彩虹效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
今天看到一篇文章，說到margin的塌陷的問題，并提供了好幾個(gè)例子。
自己之前還沒怎么遇到過這個(gè)問題，正好來研究一下。
CSS Code復(fù)制內(nèi)容到剪貼板
- <div class="box1"></div>
- <div class="box2"></div>
- <div class="box3"></div>
- <div class="box4"></div>
css樣式一，使用margin塌陷：
CSS Code復(fù)制內(nèi)容到剪貼板
- .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復(fù)制內(nèi)容到剪貼板
- .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: "";
- }
效果：
css樣式三，使用的是box-shadow：
CSS Code復(fù)制內(nèi)容到剪貼板
- .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;
- }
效果：
CSS樣式四，使用position:absolute來實(shí)現(xiàn)，感覺這種是最常見的了
CSS Code復(fù)制內(nèi)容到剪貼板
- .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;
- }
效果：
CSS樣式五，使用radial-gradient：
CSS Code復(fù)制內(nèi)容到剪貼板
- .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);
- }
以上所述是小編給大家介紹的CSS制作各種樣式的彩虹效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解
下面小編就為大家?guī)硪黄狧TML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-11- 下面小編就為大家?guī)硪黄狧TML基礎(chǔ)必看——全面了解css樣式表。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-11
- 下面小編就為大家?guī)硪黄狢SS樣式表與格式布局詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-29
- 下面小編就為大家?guī)硪黄獪\談HTML（css基礎(chǔ)樣式）。小編覺得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-27
- 下面小編就為大家?guī)硪黄狧TML (css樣式規(guī)范)必看篇。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-27
對(duì)于一些css樣式的巧妙方法進(jìn)行總結(jié)(推薦)
下面小編就為大家?guī)硪黄獙?duì)于一些css樣式的巧妙方法進(jìn)行總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-14