Html 如何使具有溢出：隐藏的父元素上方的子元素阴影显示？

我需要在

img

元素中有阴影，但是由于它被包装在一个div中，该div具有

overflow:hidden

，因此阴影也被隐藏。我可以在这里调整什么使阴影出现

.slider-content .slider-image{
    position: relative;
    float: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 20%;*/
    cursor: pointer;
    z-index: 120;
    max-width: 218px;
    max-height: 135px;
    margin-right: 1.7%;
}
.slider-content .slider-image img{
    width: 100%;
    height: 135px;
    position: relative;
    box-shadow: 0 0 10px 5px #222;
}

标记如下：

<div clss="slider-content">
  <div class="slider-image">
    <img src=".." />
  </div>
  <div class="slider-image">
    <img src=".." />
  </div>
</div>

---

由于

img

将始终填充

.slider图像

，请在

.slider图像

元素上放置阴影

.slider-content .slider-image{
    position: relative;
    float: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 20%;*/
    cursor: pointer;
    z-index: 120;
    max-width: 218px;
    max-height: 135px;
    margin-right: 1.7%;

    box-shadow: 0 0 10px 5px #222;
}
.slider-content .slider-image img{
    width: 100%;
    height: 135px;
    position: relative;
}

---

还有一个陷阱-它也在一个具有相同的

溢出：hidden

属性：）@Xeen:然后将阴影放置在该元素上？@jbutler483不行，

。滑块内容的高度也
135px
，但宽度
100%
。如@jbutler483所述，如果它们的尺寸相同，则必须将其添加到父级。关键是
overflow:hidden
会切断其子体的所有内容（无法绕过它）。@jbutler483可能会起作用（具体取决于整体设置）在外部添加填充以匹配阴影大小