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