盒子阴影内部被另一个覆盖 div

Question

我有一个 div 包含一个内框阴影，但这些阴影被另一个 div 覆盖，我尝试 postion:relative 但没有任何改变。

这是一个例子 CODE EXAMPLE

example-div{
    background:#fff;
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

提前致谢！

Answer 1

您需要做的 2 件事 - 更改图片的 z-index，使其位于通告 div 的后面，然后更改通告 [=23] 的 background =] 所以它是 transparent 而不是白色。

.example-div{
    background: transparent; /*this way you can see behind the circle*/
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

.example-div img{
    width:260px;
    height:250px;
    border-radius: 100%;
    position: relative; /*needed for z-index*/
    z-index: -1; /*positions behind the circular div, but you can still see because of transparent background*/
}

<div class="example-div">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-18.jpg"/>
</div>

盒子阴影内部被另一个覆盖 div

Box shadow inner covered by another div

html

box-shadow