box-shadow css屬性，產生陰影效果的有效方法？

Question

我一直在研究網頁設計的陰影效果技術。 因此，我想應用這項技術來爲我的網站使用頂部標題欄。

從我的發現來看，那裏的人使用最多的是box-shadow css屬性。 我想知道這是否是達到預期結果的最有效但最簡單的方法。任何其他選項可用於實現相同以及它們的優點和缺點？

任何意見將非常感激？

Answer 1

簡單的方法是Photoshop的:)

否則，請繼續閱讀：http://www.css3.info/preview/box-shadow/

box-shadow是CSS3屬性，這意味着它不具備的< IE9，而不是在大多數瀏覽器原生提供，因此專有前綴：

用於IE陰影

示例CSS代碼：

filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20'); 

CSS3已經rsion：

element { 
    -moz-box-shadow: 10px 10px 5px #888; 
    -webkit-box-shadow: 10px 10px 5px #888; 
    -o-box-shadow: 10px 10px 5px #888; 
    -khtml-box-shadow: 10px 10px 5px #888; 
    box-shadow: 10px 10px 5px #888; 
} 

Answer 2

CSS3 box-shadow屬性的唯一其他選項是使用圖像。 CSS3盒子陰影更容易應用，並且需要使用更少的頁面重量（kb）。但是，並非所有的瀏覽器都支持CSS3盒子陰影。

如果使用box-shadow屬性確定爲不同瀏覽器設置所有各種屬性。

box-shadow: 1px 2px 3px #000; 
-moz-box-shadow: 1px 2px 3px #000; 
-webkit-box-shadow: 1px 2px 3px #000; 
-o-box-shadow: 1px 2px 3px #000; 
-khtml-box-shadow: 1px 2px 3px #000;