Html 如何通过半透明div显示长方体阴影？

我有一个带有css的div元素：

  height: 50px;
  width: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 20px 20px 5px red;

尽管它是半透明的，但我看不到div下面的红色阴影。有什么方法可以显示它吗

---

编辑：因为这可能是一个渲染问题，我在Google Chrome、Firefox和IE中进行了测试，结果是一样的。

据我所知，使用框阴影无法实现这一点

您可以使用伪元素获得它：

.test {
    height: 50px;
    width: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

.test:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 20px;
    top: 20px;
    background-color: red;
    box-shadow: 0px 0px 5px red;
    position: absolute;
    z-index: -1;
}

我在伪元素中设置了一个阴影，仅用于模糊。其他阴影属性位于伪元素的左侧和顶部属性

---

看起来长方体阴影的渲染方式确实不同，但是…看看这个。