在alpha设置时,框阴影和div之间的小空间

Question

这里小提琴:http://jsfiddle.net/17zyydx1/

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比例只会让事情变得更糟.

移除阿尔法会使它消失,但这会让宝宝远离洗澡水.

谁知道这笔交易是什么？

Answer 1

它似乎是一个渲染问题,在div的物理边缘上具有抗锯齿效果.如果将div更改为偶数个像素宽,它会在垂直方向上消失,但由于边界半径,您仍然可以在角上看到它.必须在不同的时间(很可能在之后)渲染阴影,然后将其添加到页面中.随着页面调整大小,随着它"走路",IE似乎更糟糕.我不认为这可以修复,但你可以使用偶数像素宽的div来最小化问题.