Html 设置div的样式-通过其他div的中间放置阴影

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

这就是我到目前为止所做的：

.numberwrapper{
宽度：50px；
高度：90px；
背景色：黑色；
边界半径：5px；
位置：相对位置；
显示：内联块；
}
.影子{
宽度：100%；
身高：50%；
z指数：100；
盒影：0px 5px 4px-2px#8888888；
}
.号码{
字体系列：“Tahoma”，无衬线；
排名前-90；
颜色：#ffffff；
字号：85px；
线高：0px；
文本对齐：居中；
}
.大逗号{
字体系列：“Tahoma”，无衬线；
字号：85px；
颜色：黑色；
}

1.
,
2.
3.
4.

将“位置：相对”添加到.shadow，以便z索引生效：

.numberwrapper{
宽度：50px；
高度：90px；
背景色：黑色；
边界半径：5px；
位置：相对位置；
显示：内联块；
}
.影子{
宽度：100%；
身高：50%；
z指数：100；
盒影：0px 5px 4px-2px#8888888；
位置：相对位置；
}
.号码{
字体系列：“Tahoma”，无衬线；
排名前-90；
颜色：#ffffff；
字号：85px；
线高：0px；
文本对齐：居中；
}
.大逗号{
字体系列：“Tahoma”，无衬线；
字号：85px；
颜色：黑色；
}

1.
,
2.
3.
4.

真不敢相信我竟然不知道。非常感谢。