HTML页面开发中，有时候需要呈现一些场景，有的用图片来完成，有的用css来模拟完成。
下面一起来看下，怎样用css来模拟显示一张桌面上的两个球。
操作方法
（01）首先是html代码，这里的代码如图，主要是用三个div来模拟，样式名为 y1,y2的是两个圆， zm是桌面<div class="y1"></div> <div class="y1 y2"></div> <div class="zm"></div>
（02）接着看下y1的样式代码，主要是通过设置border-radius边角弧度来让div显示成圆形，再添加上背景色background-color来设置圆的颜色， display: inline-block 是为了让两个圆显示在同一水平线上background-color: #4caef0; border-radius: 100px; display: inline-block; height: 200px; width: 200px;
（03）y2第二个圆同样用 .y1的样式，所不同的是，他有自己的样式，就是设置高度和宽度，这使第二个圆比较小一点.y2{ height: 80px; width: 80px; }
（04）先看下目前代码的页面效果，就是两个并排的圆。
（05）再加上桌面的样式代码，其实就是一个有背景色的div长方形 { background-color: #66aef0; border-radius: 4px; height: 30px; width: 400px; }
（06）页面效果显示如图
（07）从上图可以看到，圆和长方形有点间隔，我们在样式上加上负的margin，让这个间隔消失掉， margin-top: -3px;
（08）现在的效果好点了。
（09）再为两个圆加一点修饰，添加投影效果。样式为box-shadow: 5px 7px 10px #666;
（10）完成了。看下现在的效果，
