Html 元素底部相互分离的多框阴影

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

我通过背景图像的响应设计实现了这一点，背景大小为：cover，并应用于伪元素

：after

。我将阴影图像与圆形白色背景相交。因此，当定位在主元素下方时，阴影与nice（屏幕截图）匹配。但是我没有使用

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;
}

然后小部件底部shade.png的尺寸是225px×30px

• 有没有办法对它们进行z索引
• 或者，有没有一种CSS框阴影方式，这样我甚至可以在WordPress的小部件系统中做类似的事情

我注册了主题的小部件区域，其地址为：

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 );

function-theme\u-widgets\u-init（）{
寄存器侧栏（数组）(
'名称'=>'左侧边栏'，
'id'=>'left_sidebar'，
'before_widget'=>'
”，
'after_widget'=>“
”，
“在标题“=>”之前，
“在标题之后”=>“
) );
}
添加操作（'widgets'u init'，'theme'u widgets'u init'，10）；

您可以使用

:before

和

:before

进行操作

需要调整阴影

---

我认为我在WP中没有奢侈，在WP widget区域中有这样的嵌套

test

。你的代码有一条不必要的白光：