css製作桌面上的兩個球

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）完成了。看下現在的效果，