Question

我可以将这种风格添加到所有角落中，而不仅仅是在底部角落吗？ - 如果是，我该怎么办呢。我试图在不是底部的两侧做它，看起来它应该是一个折叠每个角落的纸张。如果你看看前。 2如果您按下链接。我想添加相同的样式，从底部到顶部，所以所有4个角都折叠..

http://cssdeck.com/labs/different-css3-box-shadows-effects

我已经成功地进入了顶角，但是我错过了底部的角落。继承我的代码..

HTML：

＆＃13;

#d {
  margin: auto;
  width: 1140px;
  position: relative;
  z-index: 30000;
}
.content_wrapper {
  margin: auto;
  width: 1140px;
  position: absolute;
  z-index: 30;
}
.content_inner {
  width: 1140px;
  height: 800px;
  float: left;
  background-color: #baced8;
}
.effect {
  position: relative;
}
.effect:before,
.effect:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 40px;
  left: 19px;
  width: 50%;
  top: 4%;
  max-width: 300px;
  background: rgba(101, 102, 103, 0.9);
  -webkit-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
  -moz-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
  box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 19px;
  left: auto;
}
#content_box {
  width: 1134px;
  height: 770px;
  float: left;
  margin-left: 3px;
  background-color: white;
}

＆＃13;

<div id="d">
  <div class="content_wrapper">
    <div class="content_inner effect effect2">
      <div id="content_box">

      </div>
      <!--content_box-->
    </div>
    <!--content_inner-->
  </div>
  <!--content_wrapper-->
</div>

＆＃13;

Answer 1

你可以使用像.content_wrapper这样的另一个元素来获得另外两个伪元素。这两个人正在向底部展示阴影。

我认为它看起来像你想要的那样：

http://codepen.io/anon/pen/pvmYXm

effect:before, .effect:after, 
  .content_wrapper:before, .content_wrapper:after {
    content: "";  
    position: absolute;  top: 4%; bottom: 40px;  left: 19px; 
    width: 50%; max-width: 300px;

    background: rgba(101,102,103,0.9);
    box-shadow: 0 0 15px 10px rgba(101,102,103,0.9);

    -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);

    z-index: -1;
  }
  .effect:after, .content_wrapper:after  {
      right: 19px;  left: auto;    
      -webkit-transform: rotate(3deg);
          -ms-transform: rotate(3deg);
              transform: rotate(3deg);

  }

  .content_wrapper:before {
      -webkit-transform: rotate(3deg);
          -ms-transform: rotate(3deg);
              transform: rotate(3deg);
  }
  .content_wrapper:after {
      bottom: 40px; right: 19px;
      -webkit-transform: rotate(-3deg);
          -ms-transform: rotate(-3deg);
              transform: rotate(-3deg);
  }

3D阴影效果纸像造型

1 个答案: