CSS制作梦幻彩虹效果

            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复制内容到剪贴板

.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来实现，感觉这种是最常见的了

CSS Code复制内容到剪贴板

.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复制内容到剪贴板

.box4{   

           width: 260px;   

           height: 130px;   

           overflow: hidden;   

       }   

       .box5{   

           width: 260px;   

           height: 260px;   

           border-radius: 100%;   

（编辑：焦作站长网）

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