如何創建像Apple.com一樣的div陰影？

Question

我對像www.apple.com/ipodshuffle創建陰影兩個問題...

1. 在網站上，你會看到一個白色背景的主要部分 - 它包含了所有的iPod Shuffle的信息。這個主要部分的右側，左側和底部有一個陰影，但頂部沒有。我如何編碼？

2. 就在iPod Shuffles的第二張圖片上面（它們都堆疊在一起，文字上顯示「設計，儘可能美觀，可穿戴」），看起來有一個陰影邊框就像它彈出頁面，然後退回到頁面。我如何編碼？

Answer 1

這裏就是你正在尋找的代碼：約box-shadow這裏

.box{ 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
    
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; 
 
    -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; 
 
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; 
 
}

<div class="box"> 
 
    Lorem ipsum 
 
</div>

更多信息：http://www.css3.info/preview/box-shadow/

對於中央的影子，他們只是使用的圖像。