css - 设置 alpha 时框阴影和 div 之间的空间很小

Question

在这里 fiddle :http://jsfiddle.net/17zyydx1/

在div的左右两边，div和box shadow之间有一个空隙。

这在 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);
}

如您所见，我已尝试将边框设置为 0 无。 margin 0 什么都不做，padding 0 什么也不做(值得一试)，更改为 1:1 比例只会让情况变得更糟。

移除 alpha 会使它消失，但那是把婴儿连同洗澡水一起扔掉。

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

Answer 1

这似乎是 div 物理边缘上的抗锯齿效果的渲染问题。如果将 div 更改为偶数个像素宽，它会在垂直边上消失，但由于 border-radius，你仍然可以在 Angular 落看到它。投影必须在不同的时间(很可能之后)呈现，然后添加到页面中。使用 IE 时，它似乎更糟，因为它会随着页面大小的调整而“移动”。我认为这无法解决，但您可以使用偶数像素宽的 div 将问题降至最低。