Question

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

我已尝试将边框设置为0无，如您所见。边距0什么都不做，填充0什么都不做（值得一试），改为1：1的比例只会让它变得更糟。

移除阿尔法会使它消失，但那会把宝宝扔掉洗澡水。

任何人都知道这笔交易是什么？

Answer 1

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

Answer 2

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

#spsh{
background-color:cyan;
width:150px;
height:100px;
box-shadow:6px 6px 7px white , -6px 6px 7px white , 0px 20px 19px cyan;
}

<div id="spsh"></div>

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

2 个答案: