用CSS創建盒子陰影的最有效方法

Question

我很想找到用CSS創建盒子陰影的方法是最有效的。但我的意思是：易於實現，靈活性和跨瀏覽器兼容性。

Answer 1

洋蔥皮是我個人的最愛。

可以在此alistapart article中找到一個示例。

Answer 2

我覺得最有效的目前的方法是這樣的：

所需的CSS規則：在應用了CSS

 
    .shadow{ 
     position:relative; 
     display:block; 
     background-color:#bbb; 
     border:1px solid black; 
    } 

    .shadowed_item{ 
     position:relative; 
     border:1px solid black; 
     background-color:white; 
     top:-5px; 
     left:-5px; 
    } 

HTML代碼：

 
<div class='shadow'> 
    <div class='shadowed_item'>I have a shadow.</div> 
</div> 

我發現它很易於實施，靈活且在FF 3上工作相同，IE 6 & 7.

Answer 3

一種方法可以輕鬆地工作，並且具有跨瀏覽器一致性，它是jQuery Shadow plugin。 如果你不過度使用，它不會減慢頁面渲染速度。否則，你可以等到CSS3被廣泛使用;）