如何通过半透明div显示盒子阴影？

Question

我有一个带有此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中测试过，结果相同。

Answer 1

据我所知，你不能用盒子阴影得到它。

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

.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;
}

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

fiddle