只使用css獲取堆疊元素盒子陰影效果？

Question

我有一個UI元素，它應該表示在工作流程中稍後將表示的項目擴展爲多個項目。我的想法是有它看起來像這樣：

凡實際圖像總是不同的。

如果元素是這種類型，它會被標記一個特殊的類expandable-slide這是應用程序的alpha版本，所以我不在乎花很多時間把新的html和小部件，但它也是一個星期天，所以我願意玩一下，看看是否有可能只使用CSS來獲得該效果。

對我而言，堆疊效應與box-shadow非常相似，只是其中一個具有多種陰影，顏色略有不同，並被不同的量抵消。我不確定這種方法可行，但這正是我目前正在嘗試的方法。

瀏覽器的要求是現代鉻/火狐

Answer 1

box-shadow可以接受multiple shadow effects效仿你以後的樣子。這裏

.expandable-slide { 
    margin: 2em 0 0 2em; 
    box-shadow: -1em -1em #666, 
       -2em -2em #333; 
} 

工作樣本：http://jsfiddle.net/thefrontender/LwW7g/