叠纸效果

一个流行的设计技巧是创建一个看起来像一张纸的容器，然后在它下面堆叠其他纸张，以增加分层或三维效果。我们可以使用纯 CSS 来实现这种效果，但我们可以考虑多种类型的叠纸设计。我们将提供四种特定情况的代码片段。

底部垂直叠纸

这里的想法是，我们的内容容器是顶部的纸张，更多纸张在它下方堆叠，它们的边缘显示在顶部纸张的底部。

查看 CodePen 上 CSS-Tricks 的 叠纸效果 - 垂直 笔记 (@css-tricks)。

<div class="paper"></div>

.paper {
  background: #fff;
  box-shadow:
    /* The top layer shadow */
    0 1px 1px rgba(0,0,0,0.15),
    /* The second layer */
    0 10px 0 -5px #eee,
    /* The second layer shadow */
    0 10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 20px 0 -10px #eee,
    /* The third layer shadow */
    0 20px 1px -9px rgba(0,0,0,0.15);
    /* Padding for demo purposes */
    padding: 30px;
}

顶部垂直叠纸

这与上一个例子相同，但纸张堆叠在容器顶部而不是底部显示。这里唯一的区别是，我们使用负数重新定位了 .paper 元素上的 box-shadow 属性。

查看 CodePen 上 CSS-Tricks 的 叠纸效果 - 顶部垂直 笔记 (@css-tricks)。

<div class="paper"></div>

.paper {
  background: #fff;
  box-shadow:
    /* The top layer shadow */
    0 -1px 1px rgba(0,0,0,0.15),
    /* The second layer */
    0 -10px 0 -5px #eee,
    /* The second layer shadow */
    0 -10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 -20px 0 -10px #eee,
    /* The third layer shadow */
    0 -20px 1px -9px rgba(0,0,0,0.15);
    /* Padding for demo purposes */
    padding: 30px;
}

对角叠纸

这是一种略微不同的方法，我们使用 ::before 和 ::after 伪元素来创建额外的纸张，而不是在前面的示例中使用的 box-shadow 技术。

查看 CodePen 上 CSS-Tricks 的 叠纸效果 - 对角 笔记 (@css-tricks)。

<div class="paper"></div>

/* Diagonal stacked paper effect */
.paper {
  background-color: #fff;
  /* Need position to allow stacking of pseudo-elements */
  position: relative;
  /* Padding for demo purposes */
  padding: 30px;
}

.paper,
.paper::before,
.paper::after {
  /* Add shadow to distinguish sheets from one another */
  box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

/* Second sheet of paper */
.paper::before {
  left: 7px;
  top: 5px;
  z-index: -1;
}

/* Third sheet of paper */
.paper::after {
  left: 12px;
  top: 10px;
  z-index: -2;
}

凌乱的纸张堆叠

我们可以使用与上一个示例相同的方法来交错纸张以创建有意凌乱的外观，但使用伪元素，并使用 transform 属性旋转底部的纸张。此示例假设使用 Autoprefixer 或在浏览器支持可能减弱的情况下对 transform 属性使用前缀。

查看 CodePen 上 CSS-Tricks 的 叠纸效果 - 凌乱 笔记 (@css-tricks)。

<div class="paper"></div>

.paper {
  background: #fff;
  padding: 30px;
  position: relative;
}

.paper,
.paper::before,
.paper::after {
  /* Styles to distinguish sheets from one another */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.paper::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}

.paper::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}