[css] 使用css实现彩虹的效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>彩虹</title><style>.rainbow-wrap {width: 500px;height: 500px;background-color: red;position: relative;left: 20px;top: 20px;border-radius: 100%;}.rainbow-wrap::after {content: '';width: 500px;height: 250px;background-color: white;position: absolute;bottom: 0;}.rainbow-wrap::before {content: '';width: 200px;height: 200px;background-color: white;position: absolute;bottom: 0;border-radius: 100%;top: 150px;z-index: 10;left: 150px;}.rainbow-wrap .rainbow-item {position: absolute;width: 400px;height: 400px;border-radius: 100%;background-color: yellow;top: 50%;left: 50%;transform: translate(-50%, -50%);}.rainbow-item:nth-child(2) {background-color: blue;width: 300px;height: 300px;}.rainbow-item:nth-child(3) {background-color: green;width: 200px;height: 200px;}</style>
</head>
<body>
<div class="rainbow-wrap"><div class="rainbow-item"></div><div class="rainbow-item"></div><div class="rainbow-item"></div>
</div>
</body>
</html>
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
![[css] 怎么IE6下在使用margin:0 auto；无法使其居中？](http://pic.xiahunao.cn/[css] 怎么IE6下在使用margin:0 auto；无法使其居中？)
)
![[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？](http://pic.xiahunao.cn/[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？)
![[css] 如何设置背景图片不随着文本内容的滚动而滚动？](http://pic.xiahunao.cn/[css] 如何设置背景图片不随着文本内容的滚动而滚动？)
![[css] 写一个高度从0到auto的transition动画](http://pic.xiahunao.cn/[css] 写一个高度从0到auto的transition动画)
![[Luogu] P1939 【模板】矩阵加速（数列）](http://pic.xiahunao.cn/[Luogu] P1939 【模板】矩阵加速（数列）)
![[css] 移动端页面不满一屏时如何实现满屏背景？](http://pic.xiahunao.cn/[css] 移动端页面不满一屏时如何实现满屏背景？)
![[css] css中class和id选择器有什么区别？](http://pic.xiahunao.cn/[css] css中class和id选择器有什么区别？)