html - 如何通过半透明的 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