Css 设置alpha时，长方体阴影和div之间的空间很小

在这里拉小提琴：

在div的左右两侧，div和长方体阴影之间有一个间隙

这在Firefox上最为明显，但在Chrome/Safari上仍然很明显

罪犯：

.title {
  position: absolute;
  border: 0 none;
  border-radius: 10px;
  width: 375px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
}

如您所见，我已尝试将border设置为0 none。边距0不起作用，填充0不起作用（值得一试），更改为1:1的比例只会使情况更糟

移除阿尔法会让它消失，但那就是把婴儿和洗澡水一起扔掉

---

有人知道这是怎么回事吗？

这似乎是一个渲染问题，在div的物理边缘上会产生抗锯齿效果。如果将div更改为偶数像素宽，它会在垂直侧消失，但由于边界半径的原因，您仍然可以在拐角处看到这一点。放置阴影必须在不同的时间（很可能在之后）呈现，然后添加到页面中。在IE中，随着页面大小的调整，它“移动”的情况似乎更糟。我不认为这是可以解决的，但您可以使用偶数像素宽的div将问题最小化。

您可以制作三个阴影作为阴影。。。其中一个是主阴影，您必须将其放在两个透明阴影之后，并根据需要调整两个透明阴影。：）

#spsh{
背景色：青色；
宽度：150px；
高度：100px；
盒影：6px 6px 7px白色，-6px 6px 7px白色，0px 20px 19px青色；
}