Html 高度未知的长方体阴影

我正在尝试创建一个滑动效果背景，并尝试使用框阴影来创建效果。它工作得很好，但由于box shadow不能使用百分比单位，因此我必须使用像素单位手动设置数量。

HTML:

---

我想知道是否有办法使长方体的阴影与元素的高度一致。我有另一种方法，但合并起来有点困难，所以如果没有也没关系。谢谢你的帮助

最好的方法是使用伪元素，并将编写的内容包装在

中。代码要多一点，但不太复杂。下面是一个例子：

#玩游戏{
位置：相对位置；
字体大小：40px；
背景：rgb（61132212）；
边界：无；
填充：10px 20px；
溢出：隐藏；
}
#玩游戏：之后{
内容：''；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：黑色；
不透明度：0.5；
转换：translateY（-100%）；
过渡：全部缓解0.5s；
}
#玩游戏：悬停：之后{
变换：translateY（0）；
}
#玩游戏跨度{
位置：相对位置；
z指数：10；
过渡：颜色0.5s；
}
#玩游戏：悬停跨度{
颜色：rgb（222222222）；
}

---

玩游戏一个不使用JavaScript的简单解决方案是将框阴影高度设置为等于或大于最高元素

HTML:

<button id="play-game">Play Game!</button>

#play-game{
    width:240px;
    height:71px;
    font-size:40px;
    transition: all ease 0.5s, color 0.5s;
    box-shadow: inset 0 0 0 0 rgb(3, 54, 110);
    background:rgb(61, 132, 212);
    border:none;
}
#play-game:hover{
    box-shadow: inset 0 71px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

<button class="bg-effect" id="play-game">Button test 1!</button>
<button class="bg-effect" id="play-game-2">Button test 2!</button>
<button class="bg-effect" id="play-game-3">Button test 2!</button>

.bg-effect{
    width:260px;
    height: 71px;
    font-size:40px;
    transition: all ease 0.5s, color 0.5s;
    box-shadow: inset 0 0 0 0 rgb(3, 54, 110);
    background:rgb(61, 132, 212);
    border:none;
}

.bg-effect:hover{
    // '180px' represents the element with more height
    box-shadow: inset 0 180px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

// Setting different heights to the buttons
#play-game { height: 100px; }
#play-game-2 { height: 140px; }
#play-game-3 { height: 180px; }