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

Question

---

由于某些原因，当使用 部分透明 rgba() background-color 和 框影色值 的元素上，具有 非固定边界半径，它呈现的是一个 缝隙 在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).

• 该 border-radius 的div设置为 50%.

  ---

我试过的东西都不成功。

• 调整... spread 盒影值
• 为产品添加边框 div 的边框颜色值，且该值与其他颜色值相同 rgba() 作为盒状阴影和背景色的值。
• 增加一个 inset 盒影儿
• 使用相同的颜色 background-color 和 box-shadow (根据 本回答 (对相关问题的答复)
• 试图手动应用一个1px的 "叠加 "边框，并使用相同的方法。rgba() 着色 单元 (我试了一下 ::before 元素）来 "覆盖 "这个空隙。我无法将它的位置与空隙完美匹配，即使边框宽度只有1px，它的渲染也比我要覆盖的透明空隙更宽）。基于以下几点 本回答 到一个相关的问题。

---

(至少部分地)消除了差距的事情，这就是......。不 解决办法。

• 我是 能够消除它，如果我用同样的 坚实 (非透明)两种颜色值。但这不是办法，因为我失去了透明度。

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