造型 Div - 在其他 div 中间投下阴影

Question

我正在尝试创建 CSS 看起来像翻转计数器但实际上并不像一个翻转计数器的样式。我已经了解了总体外观和感觉，但我似乎无法让我的框阴影与显示编号重叠。

这是我目前拥有的：

.numberwrapper {
  width: 50px;
  height: 90px;
  background-color: black;
  border-radius: 5px;
  position: relative;
  display: inline-block;
}
.shadow {
  width: 100%;
  height: 50%;
  z-index: 100;
  box-shadow: 0px 5px 4px -2px #888888;
}
.number {
  font-family: 'Tahoma', sans-serif;
  top: -90;
  color: #ffffff;
  font-size: 85px;
  line-height: 0px;
  text-align: center;
}
.bigcomma {
  font-family: 'Tahoma', sans-serif;
  font-size: 85px;
  color: black;
}

<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    1
  </div>
</div>


<span class="bigcomma">,</span>
<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    2
  </div>
</div>

<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    3
  </div>
</div>

<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    4
  </div>
</div>

就像我说的，我最大的问题是我无法让我的 .shadow div 显示在数字之上。

Answer 1

将 "position: relative" 添加到 .shadow 以启动 z-index：

.numberwrapper {
  width: 50px;
  height: 90px;
  background-color: black;
  border-radius: 5px;
  position: relative;
  display: inline-block;
}
.shadow {
  width: 100%;
  height: 50%;
  z-index: 100;
  box-shadow: 0px 5px 4px -2px #888888;
  position: relative;
}
.number {
  font-family: 'Tahoma', sans-serif;
  top: -90;
  color: #ffffff;
  font-size: 85px;
  line-height: 0px;
  text-align: center;
}
.bigcomma {
  font-family: 'Tahoma', sans-serif;
  font-size: 85px;
  color: black;
}

<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    1
  </div>
</div>


<span class="bigcomma">,</span>
<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    2
  </div>
</div>

<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    3
  </div>
</div>

<div class="numberwrapper">
  <div class="shadow">
  </div>
  <div class="number">
    4
  </div>
</div>

造型 Div - 在其他 div 中间投下阴影

Styling Divs - Drop Shadow through the middle of other div

html

css

box-shadow