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

【问题标题】：How to display a box-shadow through a semi-transparent div?如何通过半透明的 div 显示盒子阴影？
【发布时间】：2014-04-26 01:09:48
【问题描述】：

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

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

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

编辑：可能是渲染问题，我在谷歌浏览器、Firefox 和 IE 中进行了测试，结果相同。

【问题讨论】：

似乎盒子阴影的渲染方式有所不同......看看这个fiddle。

标签： html opacity css

【解决方案1】：

据我所知，您无法使用 box-shadow 获得此效果。

你可以用伪元素得到它：

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

我在伪元素中设置了阴影，仅用于模糊。其他阴影属性转到伪元素的 left 和 top 属性。

fiddle

【讨论】：