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中一样。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

你要求创建一个以0偏移，0模糊，0扩展开始的盒子阴影。

但是FF仍然会尝试生成它（就像它是1px 1px 0px 0px）。

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

由于边框是圆角的，因此阴影必须是抗锯齿的。

你看到的是抗锯齿工件。

为了避免它，你可以

• 不要设置box-shadow
• 将其color设置为透明
• 将其spread设置为-1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

FF读取box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);就像
一样 box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 1);

只需将box-shadow更改为box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 1);，您就可以了。

＆＃13;

＆＃13;

div.styles {
  position: inherit;
  background-color: #fff;
  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: 1px 1px 1px 0px rgba(0, 0, 0, 1);
  overflow: hidden;
  display: flex;
}

div.container {
  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;
}

＆＃13;

<div class="styles">
  <div class="container">
    <p>Border artifact are rendered in corners only on Firefox.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle