箱内阴影div对内部分

Question

我有一个div外box-shadow我希望这出现在内div。但它总是出现在它下面。 jsfiddle是here。

我的HTML是：

<div class="wrapper"> 

    <div class="inner"> 

    </div> 

</div> 

和CSS：

.wrapper { 
    width: 200px; 
    height: 100px; 
    border: 1px grey solid; 
    box-shadow: inset 40px 0 10px -10px #bbbbbb; 
} 

.inner{ 
    width: 180px; 
    height: 80px; 
    margin: 10px; 
    background-color: lightblue; 
} 

是否有可能得到它，以便在出现内部蓝色div的box-shadow？ HTML的语义不能改变。

Answer 1

将孩子相对的，z-index的位置为-1：

.wrapper { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px grey solid; 
 
    box-shadow: inset 40px 0 10px -10px #bbbbbb; 
 
} 
 

 
.inner { 
 
    width: 180px; 
 
    height: 80px; 
 
    margin: 10px; 
 
    background-color: lightblue; 
 
    position:relative; 
 
    z-index:-1; 
 
}

<div class="wrapper"> 
 

 
    <div class="inner"> 
 

 
    </div> 
 

 
</div>

Answer 2

更新的样式内部类的绝对位置，并给z-index: -1;;

.inner { 
    width: 180px; 
    height: 80px; 
    margin: 10px; 
    background-color: lightblue; 
    position:relative; 
    z-index:-1; 
} 

这里是更新jsFiddle

Answer 3

你可以做的是不带内胆想要什么为好。

http://codepen.io/creativenauts/pen/rLWZqp

* { 
    box-sizing: border-box; 
} 

.wrapper { 
    width: 200px; 
    height: 100px; 
    border: 20px solid #fff; 
    background-color: lightblue; 
    box-shadow: 0px 0px 1px rgba(#000, 0.5); 
    position: relative; 
    &:before { 
    position: absolute; 
    content: ''; 
    width: 100%; 
    height: 100px; 
    top: -20px; 
    left: -20px; 
    box-shadow: inset 40px 0 10px -10px #bbbbbb; 
    } 
}