css - 仅使用 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/