如何用HTML/CSS創建一個陰影框，比如Apple的網站很好？

蘋果的網站有許多視覺上吸引人的元素，有時候剛剛起步的網頁開發人員可能會看到某些元素，並想知道如何再現這種外觀。所以我提出了這個問題（並將提供答案）：如何用HTML/CSS創建一個陰影框，比如Apple的網站很好？

Apple如何處理帶圓角的投影箱？

2011-01-14 TheEternalAbyss

你試圖使用樣式表檢查的開發工具，以找出加

-webkit-box-shadow

？ – Spudley 2011-01-14 15:41:00

通常它是通過在photoshop中設計盒子並將其與已有的陰影一起導出來完成的。不過，也有新的CSS3技術，讓你做它認爲代碼：

See this website

來源

2011-01-14 15:41:19

是的，我之前使用過Photoshop技術，但如果您希望您的網站是動態的，並且您的shadowbox能夠動態更改大小並保留效果，那麼它不是非常靈活。感謝您的輸入:) – TheEternalAbyss 2011-01-14 15:43:47

如前所述我有了答案：

該效果的CSS如下

.content { 
    background-color: #fff; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    -moz-border-radius: 4px 4px 4px 4px; 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    -webkit-border-radius: 4px 4px 4px 4px; 
    border-color: #E5E5E5 #DBDBDB #D2D2D2; 
    border-style: solid; 
    border-width: 1px; 
    height: 210px; 
    width: 320px; 
}

這個代碼的

Check out a jsfiddle看到它的行動。

希望這有助於任何尋找快速簡單的shadowbox的人。

〜TheEternalAbyss

來源

2011-01-14 15:41:58 TheEternalAbyss

我認爲他們實際上使用的是比這更多的CSS，因爲您發佈的代碼在Safari中無法使用。 – 2011-01-14 15:44:24

它不適用於safari？嗯。我會研究一下。謝謝 – TheEternalAbyss 2011-01-14 15:46:01

Google Chrome’s Inspector或Firefox’s Firebug extension可以告訴你他們使用的HTML和CSS。

來源

2011-01-14 15:43:30

你應該WebKit引擎（Safari瀏覽器，鍍鉻），基於瀏覽器