CodePen

HTML

            
              <!--
When negative Z-index encounter with html and body tag's background

Try uncomment z-index: 0 for div.cover,
the shadow which has z-index:-1 declaration will be override by body tag.

Conclustion:
<html> tag's background has infinitesimal z-index value,
<body> tag's background's z-index value may be default 0
-->
<div class="cover">
  <div class="poster" style="background-image: url(http://img5.douban.com/view/photo/photo/public/p1997952346.jpg)">
  </div>
</div>
            
          
!

CSS

            
              @mixin shadow() {
  position: relative;
  z-index: 0; // uncomment this line to see what happens
  &:before, &:after {
    z-index: -2;
    
    content: "";
    position: absolute;
    width: 50%;
    height: 10px;
    bottom: 5px;
    background: #000;
    box-shadow: 0 10px 10px #000;
  }
  &:before {
    left: 10px;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  &:after {
    right: 10px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}

html {
  background: aliceblue;
}
body {
  background: url(http://img5.douban.com/view/photo/large/public/p2005237016.jpg) no-repeat center;
  background-size: cover;
  width: 600px;
  height: 600px;
  margin: 0 auto;
}
.cover {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  @include shadow();
  .poster {
    width: 100%;
    height: 300px;
    background-size: 200px;
    &:before {
      content: "";
      background: #fff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................