CSS制作各种样式的彩虹效果

走进景山公园，抬头望去，高大的万春亭红柱黄瓦，在茂密的翠林映衬下，像一幅美丽的图画。

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

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

CSS Code复制内容到剪贴板

css样式一，使用margin塌陷：

CSS Code复制内容到剪贴板

效果：

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

CSS Code复制内容到剪贴板

效果：

css样式三，使用的是box-shadow：

CSS Code复制内容到剪贴板

效果：

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

CSS Code复制内容到剪贴板

效果：

CSS样式五，使用radial-gradient：

CSS Code复制内容到剪贴板

.box4{
width:260px;
height:130px;
overflow:hidden;
}
.box5{
width:260px;
height:260px;
border-radius:100%;
background:radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
background:-moz-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
background:-webkit-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
}

以上所述是小编给大家介绍的CSS制作各种样式的彩虹效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

以上就是CSS制作各种样式的彩虹效果。大多数人都只是过客和观光者，只有少数人创造者；大多数人都是梦想家，只有少数人才是实干家；藏锋，内敛，谦虚。更多关于CSS制作各种样式的彩虹效果请关注haodaima.com其它相关文章！

全站频道