CSS-带页脚阴影

---

原理：

image.png

    .book-box {
      width: 250px;
      margin: 0 auto;
      position: relative;
      /*box-shadow: 1px 0 2px rgba(0, 0, 0, 0.16);*/
    }
    .book-box:before,
    .book-box:after {
      z-index: -2; 
      /*content的z-index属性让内容浮在阴影之上,必不可缺,值越高级别越高，越在上面一层*/
      content: "";
      position: absolute;
      /* -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);*/
      transform: skew(-15deg) rotate(-6deg);
      /*把矩形的直角变成斜角（菱形）*/
      -webkit-transform: skew(-15deg) rotate(-6deg);
      bottom: 15px;
      box-shadow: 0 16px 14px rgba(0, 0, 0, 0.5);

      height: 20%;
      /*定义隐藏的矩形宽度*/
      left: 6.5px;
      /*把矩阵往右推，避免露出来*/
      max-width: 300px;
      width: 50%;
      /*定义隐藏的矩形长度*/
    }
    .book-box:after {
      /*-webkit-transform: rotate(10deg);*/
      /*transform: rotate(10deg);*/
      transform: skew(15deg) rotate(6deg);
      -webkit-transform: skew(15deg) rotate(6deg);
      left: auto;
      right: 6.5px; 
      /*把矩阵往左推，避免露出来*/
    }
    .book-box .book {
      position: relative;
      font-size: 13px;
      text-align: center;
      background: #fff;
      padding: 10px;
      /*为照片扩容避免暴露底下的模块露馅*/
    }