首页 > html > pager > Page Widget - 如何创造3d底层纸象阴影

Page Widget - 如何创造3d底层纸象阴影

pager 【pager】
我们想知道如何创造3d底层纸象阴影。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h1 {
  position: relative;
  padding-top: 100px;
  top: -1ex;
  text-transform: uppercase;
}

.shadow-box {
  width: 300px;
  height: 200px;
  margin: 25px auto;
  position: relative;
  background-color: #fff;
  text-align: center;
}

.shadow-box:before, .shadow-box:after {
  content: "";
  display: block;
  width: 280px;
  height: 20px;
  position: absolute;
  left: 10px;
  bottom: 13px;
  z-index: -1;
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
}

.shadow-box:before {
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.shadow-box:after {
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}
</style>
</head>
<body>
  <div class="shadow-box">
    <h1>this is a test</h1>
  </div>
</body>
</html>