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

Question

---

由于某些原因，在具有非固定（百分比）的元素上使用部分透明的rgba（）背景颜色和盒阴影颜色值 （基于边界）半径，它会在背景和框阴影<之间的div元素的边缘处呈现 微小的透明间隙 / 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)。

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

  ---

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

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

---

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

• 我可以 将其消除，如果我对两者使用相同的 solid （非透明）颜色值， strong>但这不是解决方案，因为我失去了透明度。

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

• 最后，将 var colorArray = new Color[b.Length/4]; for (var i = 0; i < b.Length; i += 4) { var color = Color.FromArgb(b[i + 0], b[i + 1], b[i + 2], b[i + 3]); colorArray[i / 4] = color; } 的值从百分比更改为固定的（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>