html - 如何用html和css实现堆叠样式效果？

Question

这种样式是如何使用 html 和 css 实现的？它看起来像三个 div，但是当通过控制台检查时，似乎可能正在使用 ::before。

还有谁知道这种风格可能被称为什么，所以我可以更新这个问题的标题更具体？

我从这里截取了这张图片和示例 http://todomvc.com/examples/react/#/

Answer 1

查看代码，很容易发现他们是如何实现这种效果的。堆叠 box-shadows。

.footer:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
        0 8px 0 -3px #f6f6f6,
        0 9px 1px -3px rgba(0, 0, 0, 0.2),
        0 16px 0 -6px #f6f6f6,
        0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

但是根据您的需要，肯定有更多方法可以做到这一点。