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

Question

---

出于某种原因，当在具有非固定(百分比)的元素上使用部分透明的rgba()背景颜色和盒子阴影颜色值时， -based) border-radius，它在 div 元素的边缘背景和 box-shadow<之间渲染一个微小的透明间隙/strong>.

---

我的问题是......

如何消除这个间隙，同时保持具有背景颜色和框阴影透明度的非固定边框半径？

---

这是代码:

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) 。

• border-radius div 的值设置为 50% 。

  ---

我尝试过但不成功的事情:

• 调整spread盒子阴影的值
• 向 div 添加边框具有相同的边框颜色值 rgba()作为盒子阴影和背景颜色值
• 添加 inset box-shadow(产生了同样的问题)
• 对 background-color 使用相同的颜色和box-shadow (正如this answer对相关问题的建议)
• 尝试手动应用具有相同的 1px“覆盖”边框 rgba()使用单独的元素(我尝试了 ::before 元素)来“覆盖”间隙。 (我无法将其定位为与间隙完美匹配，即使边框宽度仅为 1px，它也会比我试图覆盖的透明间隙更宽)。基于this answer相关问题。

---

(至少部分地)消除差距的事情，不是解决方案:

• 如果我对两者使用相同的纯色(不透明)颜色值，我就能够消除它，<但这不是一个解决方案，因为我失去了透明度。

• 更改 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>