css - 仅使用 css 获得堆叠元素框阴影效果？

Question

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

实际图像总是不同的地方。

如果元素属于这种类型，它会被标记为一个特殊的expandable-slide类愿意玩一下，看看是否有可能只使用 css 来获得这种效果。

在我看来，堆叠效果与 a 非常相似box-shadow，只是一个具有多个阴影，颜色略有不同，偏移量不同。我不确定这种方法是否有效，但这就是我目前正在尝试的方法。

浏览器要求是现代 chrome/firefox

Answer 1

box-shadow可以接受多种阴影效果来模拟您所追求的外观。

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

此处的工作示例：http: //jsfiddle.net/thefrontender/LwW7g/