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

Question

---

出于某种原因，当在具有非固定（基于百分比）边界半径，它在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 对相关问题的建议）
• 尝试使用 单独的元素 手动应用具有相同 rgba() 颜色的 1px "overlay" 边框（我尝试了 ::before 元素) 到 "cover" 的差距。 （我无法将它定位为与间隙完美匹配，即使边框宽度仅为 1px，它呈现的宽度也比我试图覆盖的透明间隙宽）。基于 this answer 的相关问题。

---

（至少部分地）消除了差距的东西，不是解决方案：

• 我如果我用同样的solid[=102就可以消除它=]（非透明）两者的颜色值，但这不是解决方案，因为我失去了透明度。

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

• 最后，将 border-radius 值从百分比更改为固定值（px 或 em）确实有帮助，但取决于值，通常这仍会产生间隙。所以这也不是解决方案。

Answer 1

模糊滤镜可以毫无问题地为您提供相同或至少相似的输出：

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%;
}

<h1 id="background-underlay">Background Text</h1>
<div id="overlay-div"></div>