设置 alpha 时框阴影和 div 之间的小空间答案

【问题标题】：Small space between box shadow and div when alpha set设置 alpha 时框阴影和 div 之间的小空间
【发布时间】：2022-05-10 20:17:23
【问题描述】：

在这里提琴：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 none。边距 0 什么都不做，填充 0 什么都不做（值得一试），更改为 1:1 比例只会让情况变得更糟。

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

有人知道这是什么交易吗？

【问题讨论】：

标签： css

【解决方案1】：

这似乎是一个渲染问题，在 div 的物理边缘上具有抗锯齿效果。如果将 div 更改为偶数像素宽，它会在垂直边消失，但由于边框半径，您仍然可以在角落看到它。阴影必须在不同的时间（很可能在之后）呈现，然后添加到页面中。对于 IE，它似乎更糟，因为它在调整页面大小时“行走”。我认为这无法解决，但您可以使用偶数像素宽的 div 将问题最小化。

【讨论】：

【解决方案2】：

你可以制作三个阴影作为你的阴影...其中一个是你的主阴影，你必须把它放在两个透明阴影之后，然后根据需要调整两个透明阴影。 :))

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

&lt;div id="spsh"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

在我的网站上为活动幻灯片创建了这个轮廓，带有框阴影：0 0px 0px 4px white, 0px 0px 0px 4px white, 0px 0px 0px 6px #005489;

可能会有帮助

【讨论】：