最好的方式來應用陰影每一邊的包裝

我想這是一個非常典型的設計，有一個全屏幕背景圖像和一個白色背景的內容的居中包裝。這個白色包裝的左邊和右邊有一個幾個像素寬的整齊陰影。類似於this site。最好的方式來應用陰影每一邊的包裝

達到此目的的最佳方法是什麼？背景圖像（如果是這樣，在什麼以及如何？）或邊框，還有其他的東西？任何幫助讚賞。

編輯：我需要這個在IE7上支持。

2012-07-24 Francesca

谷歌盒陰影你會得到你的答案。 – SVS 2012-07-24 10:10:34

對於支持回IE7我推薦使用的圖像。您的圖像將放置在身體標記對齊的頂部/中心，並在Y軸上重複。圖像本身的高度只有一個像素，並且需要用於設計。任何有能力使用Photoshop的人都可以爲您創建。

2012-07-24 10:34:15

）謝謝，這是我正在考慮的方式，但如果站點響應，因爲背景圖像必須是固定寬度，這會讓人感到難過。哦，我可以試着用IE3的filter/hack來代替CSS3。希望IE會死的！ – Francesca 2012-07-24 14:02:04

很酷。在手機屏幕等小型設備上查看網站時，這並不是什麼大問題。您可以通過媒體查詢隱藏BG圖像。投影效果很好，在較大的屏幕上有很好的寬度（白色空間），但在較小的屏幕上，實際上沒有任何寬度（空白區域），我認爲它可能沒有問題它:) – 2012-07-24 14:32:29

你可以用CSS3 box-shadow屬性來做到這一點。

#wrapper { 
    box-shadow: 0 0 10px #000; 
    border:1px solid #000; 
}

所有現代瀏覽器都支持這個功能，但如果你需要支持IE < 9，你需要使用圖片或外部庫如PIE。瀏覽器的兼容性

2012-07-24 10:11:31 Simone

這會支持IE7和FF3.0嗎？ – Francesca 2012-07-24 10:13:04

沒有。 FF自3.5開始支持它（前綴爲-moz- – Simone 2012-07-24 10:17:42

回答