用纯CSS画出蓝天白云（详细版）
在HTML5课上，老师要求我们提前学习如何用CSS画出蓝天白云并实现白云飘浮，在网上找了下，对着理解前辈们的代码消化了一下，故此记录下来。
目前，仅是实现了画出蓝天白云的效果图：
HTML：
<div class="container">
<div class="blueSky">
<div class="cloud1"></div>
<div class="cloud2"></div>
</div>
<div class="grassLand"></div>
</div>
实现蓝天和白云的CSS：
.blueSky{
width: 100%;
height: 240px;
background:
-webkit-linear-gradient(top,rgb(196,228,253),rgb(255,255,255));
background: -moz-linear-gradient(top,rgb(196,228,253),rgb(255,255,255));
background: -o-linear-gradient(top,rgb(196,228,253),rgb(255,255,255));
background: linear-gradient(top,rgb(196,228,253),rgb(255,255,255));
position: relative;
}
.grassLand{
width: 100%;
height: 160px;
background:
-webkit-linear-gradient(top,rgb(255,255,255),rgb(148,190,90));
background: -moz-linear-gradient(top,rgb(255,255,255),rgb(148,190,90));
background: -o-linear-gradient(top,rgb(255,255,255),rgb(148,190,90));
background: linear-gradient(top,rgb(255,255,255),rgb(148,190,90));
}
这里解释一下：linear-gradient(),linear-gradient()就是实现线性渐变的一个效果，写了不同的前缀以兼容不同浏览器。（top,从上到下，实现从后面两个的颜色变化）
实现云朵的CSS:
.cloud1{
width: 103px;
height: 43px;
background-color: #fff;
border: azure 1px solid;
border-radius: 50%;
position: absolute;
left: 40%;
top: 20%;
}
.cloud1::after{
content: '';
height: 30px;
width: 46px;
background-color: #fff;
border:azure 1px solid;
border-radius: 50%;
display: block;
top: -8px;
left: 48px;
}
.cloud1::before{
content: '';
height: 36px;
width: 46px;
background-color: #fff;
border: #fff 1px solid;
border-radius: 40%;
display: block;
position: absolute;
top: 10px;
left: 36px;
}
.cloud2{
width: 200px;
height: 30px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
left: 70%;
top:20%;
}
.cloud2:after{
content: "";
height: 29px;
width: 86px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
display: block;
position: absolute;
top: -8px;
left: 48px;
}
.cloud2:before{
content: "";
height: 26px;
width: 96px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 100%;
display: block;
position: absolute;
top: 9px;
left: 83px;
}
这里解释一下：：before和::after：
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
主要体验就是：不断动手操作，就会明白这是如何实现的。