使用部分透明的rgba（）值时如何消除框阴影和div背景之间的间隙

Question

---

由于某些原因，在具有非固定（基于百分比）边界半径的元素上使用部分透明的rgba（）背景颜色和框阴影颜色值时）> ，它会在div元素背景和方格阴影之间的边缘处渲染微小透明间隙。

---

我的问题是这个...

如何摆脱这个空白，同时保持具有背景颜色和框阴影透明度的非固定边界半径？

---

这里是代码：

html {
  background-color: #cef;
  font-family: arial;
}
#background-underlay{
  background-color: white;
  text-align: center;
  margin-top: 5%; 
  padding-top:0px;
  color: black;
}
#overlay-div{
  display: flex;
  position: fixed;
  top: 15%;
  left: 15%;
  height: 70%;
  width: 70%;
  background-color: rgba(0, 0, 40, 0.8);
  color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 2em 2em rgba(0, 0, 40, 0.8);
}
<h1 id="background-underlay">Background Text</h1>
<div id="overlay-div"></div>

---

示例元素的描述：

• 我有一个<div>，具有半透明的rgba背景色和阴影。

背景颜色和框阴影颜色值均设置为rgba(0, 0, 40, 0.8)。

div的border-radius设置为50%。

---

我尝试过的不成功的事情：

• 调整框阴影的spread值

[边框颜色值与框阴影和背景颜色值相同的边框颜色值添加到div的边框

添加rgba()盒子阴影（产生同样的问题）

为inset和background-color使用相同的颜色（如box-shadow对相关问题的建议）

尝试使用单独的元素

以相同的this answer颜色手动应用1px“重叠”边框（我尝试过rgba()元素）以“覆盖”间隙。 （我无法将其定位为与间隙完美匹配，即使边框宽度仅为1px，也比我要覆盖的透明间隙更宽）。基于::before的相关问题。

---

（至少部分地）消除了间隙的东西，是not解决方案：

• [我]]可以消除它，如果我对两者使用相同的solid

（非透明）颜色值，但这不是解决方案，因为我失去透明度。

更改this answer属性值也不是解决方案，因为这会干扰div中嵌套的任何内容（例如图像或文本）的透明度，这是导致首先要解决使用opacity而不是rgba()的麻烦。

最后，将opacity值从百分比更改为固定（px或em）有帮助，但是根据该值，通常仍会产生差距。所以这也是不是解决方案

。

由于某些原因，当在边界半径不固定（基于百分比）的元素上使用部分透明的rgba（）背景色和框阴影颜色值时，它会在...处呈现微小的透明间隙。 >

模糊滤镜可以为您提供相同的输出，或者至少可以提供相似的输出而没有问题：

border-radius
html {
  background-color: #cef;
  font-family: arial;
}
#background-underlay{
  background-color: white;
  text-align: center;
  margin-top: 5%; 
  padding-top:0px;
  color: black;
}
#overlay-div{
  display: flex;
  position: fixed;
  top: 8%;
  left: 8%;
  height: 81%;
  width: 81%;
  background-color: rgba(0, 0, 40, 0.8);
  filter:blur(1.5em);
  color: white;
  border-radius: 50%;
}

Answer 1

模糊滤镜可以为您提供相同的输出，或者至少可以提供相似的输出而没有问题：