元素底部的多个框阴影彼此分开

Question

在我的WordPress小部件设计中，我在每个小部件下面设计了一个阴影，如下图所示：

我在带有背景图像的响应式设计中实现了这一点，background-size: cover并应用于伪元素:after。我通过与圆形白色BG相交来剪切阴影图像。所以当位于主元素下方时，阴影匹配得很好（截图）。但是我没有使用z-index为主元素和伪元素做CSS，所以移动设备中的图像看起来很糟糕。在移动设备中，图像会拉伸并与主要元素重叠。

我尝试了主要元素：

li.widget-container{
   border: 1px solid #ccc;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
   padding: 10px;
   margin-bottom: 20px;
   position: relative;
   z-index: 5;
}

在使用：

执行伪元素时

li.widget-container:after{
   content: '';
   display: block;
   background: transparent url('images/widget-bottom-shade.png') no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   width: 100%;
   height: 30px;
   position: absolute;
   left: 0;
   z-index: 1;
}

然后widget-bottom-shade.png的尺寸为225px×30px。

• 有没有办法可以对它们进行z-index。
• 或者，是否有一个CSS box-shadow方式，以便即使在WordPress的widget系统中我也可以做类似的事情？

我用以下内容注册了主题的小部件区域：

function theme_widgets_init() {
    register_sidebar( array (
            'name' => 'Left Sidebar',
            'id' => 'left_sidebar',
            'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            'after_widget' => "</li>",
                'before_title' => '<h3 class="widget-title">',
                'after_title' => '</h3>'
    ) );

}

add_action( 'widgets_init', 'theme_widgets_init', 10 );

Answer 1

您可以使用:before和:after。

来执行此操作

需要调整阴影。

Here id the demo