html - div 在内部 div 上的框阴影

Question

我有一个带有 box-shadow 的外部 div，我希望它出现在内部 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;
}

是否有可能使 box-shadow 出现在内部蓝色 div 上？ HTML 的语义不能改变。

Answer 1

将 child 的位置设置为 relative 并将 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>