箱內陰影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; 
    } 
}