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

【问题标题】：Get a stacked-element box-shadow effect using only css?仅使用 css 获得堆叠元素框阴影效果？
【发布时间】：2013-04-08 09:40:18
【问题描述】：

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

实际图像总是不同的。

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

我突然想到，堆叠效果与box-shadow 非常相似，只是一个具有多个颜色略有不同的阴影并偏移不同数量的阴影。我不确定这种方法是否可行，但这是我目前正在尝试的方法。

浏览器要求是现代 chrome/firefox

【问题讨论】：

【解决方案1】：

box-shadow 可以接受 multiple shadow effects 来模拟您所追求的外观。

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

【讨论】：

谢谢，这就是我从 w3schools 阅读文档所得到的——不完整的文档 :)
MDN 是一个更好的资源......通常只需在您的网络搜索前加上“mdn”即可返回正确的文档。希望新的 Web 平台文档也能尽快变得更加完整。任何可以摆脱 w3schools 的世界