html - box-shadow 和 rgba(0, 0, 0, 0.5) 时的 Firefox 渲染问题

Question

将 box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5); 应用于 Firefox 上的 div 元素时，周围会出现一些细黑色轮廓该div。

相同的代码在 Chrome 上呈现不同的效果，因为 div 周围没有出现黑色轮廓。

我想知道这是否是 FF 特定的已知错误问题以及解决方法(因为经过一番搜索后我找不到任何信息)。

注意事项: 期望的结果是一个边缘没有伪影的盒子，就像 Chrome 中一样。

<div style="position: inherit; top: 0px; left: 0px; width: inherit; height: inherit; transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1) scaleZ(1) translateX(0px) translateY(0px) translateZ(0px); backface-visibility: visible; border-radius: 10px; border-style: solid; border-width: 0px; background-color: rgba(0, 0, 0, 0); border-color: rgb(0, 0, 0); opacity: 1; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5); overflow: hidden; display: flex;">
  <div style="width: inherit; font-family: Arial,Helvetica,sans-serif; font-size: 16px; font-weight: 400; color: rgb(0, 0, 0); letter-spacing: 0em; line-height: 1.2em; padding: 16px; overflow-wrap: break-word; text-align: left; align-self: flex-start;">
    <p>Border artifact are rendered in corners only on Firefox.</p>
  </div>
</div>

Answer 1

这听起来正常对我来说是可以理解的:

您要求创建一个以 0 偏移、0 模糊、0 扩散开始的盒子阴影。

但 FF 仍会尝试生成它(就像 1px 1px 0px 0px 一样)。

div{
  border-radius: 12px;
  box-shadow: 1px 1px 0px 0px red;
  height: 25px;
  }

<div></div>

由于边框是圆形的，因此必须对阴影进行抗锯齿处理。

您看到的是抗锯齿伪像。

要避免这种情况，您可以

• 不要设置盒​​子阴影
• 将其颜色设置为透明
• 将其传播设置为-1

div{
  border-radius: 12px;
  height: 25px;
  box-shadow: 0px 0px 0px 0px red;
  background: rgba(0,0,0,.1);
  }
.no-box{
  box-shadow: none;
  }
.transp{
  box-shadow: 0px 0px 0px 0px transparent;
  }
.minus{
  box-shadow: 0px 0px 0px -1px red;
  }

<div class="fail"></div>
<div class="no-box"></div>
<div class="transp"></div>
<div class="minus"></div>