仅使用css获得叠加元素盒阴影效果？

Question

我有一个ui元素，它应该表示所表示的项目将在工作流程中稍后扩展为多个项目。我的想法是让它看起来像这样：

实际图像总是不同的。

如果元素属于这种类型，则会使用特殊类expandable-slide进行标记。这是应用程序的alpha版本，因此我不会花太多时间来添加新的html和小部件，但它也是一个星期天，所以我愿意玩一下，看看是否有可能只用css来获得这种效果。

我发现堆叠效果非常类似于box-shadow，只有一个具有多个阴影，颜色略有不同并且偏移量不同。我不确定这种方法是否有效，但这正是我目前正在尝试的方法。

浏览器要求是现代chrome / firefox

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/