Question

我需要在img元素中有阴影，但由于它被包含在overflow: hidden的div中，阴影也会被隐藏。我可以在这里调整什么来使阴影出现？

.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>

Answer 1

由于img将始终填充.slider-image，因此请将影子置于.slider-image元素上。

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

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

1 个答案: