：之前和之后：框阴影不显示

Question

这是我的第一篇帖子，所以如果我做错了事，我会提前道歉。

我希望在我的图片滑块上有一个页面卷曲框阴影效果，就像在这里的“效果2”示例中一样：http://cssdeck.com/labs/different-css3-box-shadows-effects

我的问题是.flexslider：之前，.flexslider：后效果没有出现。我猜这是一个z索引问题，但我尝试了不同的z-index值，并查看了我在这里可以找到的所有类似帖子，但它们仍然不会出现。

如果我在.flexslider上放了一个方框阴影，它会显示出来。

如果有人能对此有所了解，我将非常感激。

这是我的HTML：

<section id="home" class="main_section_home">
    <div class="flexslider clearfix">
        <ul class="slides">
            <li><img src='http://eventrenderings.com/TEMP/wp-content/uploads/2013/12/01.jpg' alt=''><p class='flex-caption'></p></li><li><img src='http://eventrenderings.com/TEMP/wp-content/uploads/2013/12/02.jpg' alt=''><p class='flex-caption'></p></li>
            <li><img src='http://eventrenderings.com/TEMP/wp-content/uploads/2013/12/03.jpg' alt=''><p class='flex-caption'></p></li><li><img src='http://eventrenderings.com/TEMP/wp-content/uploads/2013/12/04.jpg' alt=''><p class='flex-caption'></p></li>
        </ul>
    </div>          
</section>

我的CSS：

.main_section_home {
    position: relative; 
}

.flexslider {
    background: #eee;
    width: 94% !important;
    height: auto !important;
    border-top: 12px solid #eee;
    border-right: 12px solid #eee;
    border-bottom: 8px solid #eee;
    border-left: 12px solid #eee;
    margin: 0 auto 50px auto;
    text-align: center;
    position: relative;
}

.flexslider:before, .flexslider:after
{
  position: relative;
  content: " ";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  border: solid 1px #ff0000;
}

.flexslider:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}