CSS制作梦幻彩虹效果

2020-05-11 18:04:13易采站长站整理

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