如何去除div的轻微白边？答案

【问题标题】：How to remove div's slight white edge?如何去除div的轻微白边？
【发布时间】：2017-06-03 17:52:32
【问题描述】：

以下是我的代码的一部分。问题是如何去除 mozilla firefox 50.1.0

中蓝色圆框上的小白线

.s{
  animation: 2s ease-out 0s normal none infinite running r0;
  background: #639dcf none repeat scroll 0 0;	
  border-radius: 50%;
  cursor: pointer;
  float: left;
  height: 90px;
  transition: all 0.2s ease 0s;
  width: 90px;
  margin: 200px;
}
@-webkit-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}
@-moz-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}
@keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}

&lt;div type="button" id="menuOrb" class="s m1 "&gt;&lt;/div&gt;

【问题讨论】：

....边界在哪里？
代码中没有“白色”。
我没有为边框编码，但您仍然可以在蓝色圆框上看到一条细小的白线（如 Illusion）。你可以在sn-p
不是答案，但我希望您知道box-shadow 动画非常密集，从性能角度来看应尽可能避免。
它的 mozilla firefox 50.1.0 @Harry

标签： html css firefox css-animations mozilla

【解决方案1】：

您所看到的实际上是由于关键帧中的颜色不匹配。在0% 和100%，您使用颜色代码#639dcf，在10%，您使用#4f90c9。这会导致您圈子的box-shadow 和background-color 之间存在足够大的差异，以致出现“白色”差距。

尝试更改要使用的关键帧：

  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 12px 14px #639dcf;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }

JSFIDDLE

火狐更新

在 OSX Firefox v50.1.0 中进行了测试，你是对的，由于border-radius，圆圈周围有一条抗锯齿像素轨迹。为了解决这个问题，我发现的最佳解决方案是利用伪元素 :after 并用自己的边界“覆盖”违规路径。

CSS

.s{
  animation: 2s ease-out 0s normal none infinite running r0;
  background: #639dcf none repeat scroll 0 0;   
  border-radius: 50%;
  cursor: pointer;
  float: left;
  height: 90px;
  transition: all 0.2s ease 0s;
  width: 90px;
  margin: 200px;
  position:relative;
}
.s:after{
  content:"";
  position:absolute;
  top:-2px;
  left:-2px;
  bottom:-2px;
  right:-2px;
  border:3px solid #639dcf;
  border-radius:50%;
}

Updated Fiddle

之前与之后

【讨论】：

感谢您的回答，但您是否在firefox 中查看过此信息
@Maddy，已更新，对有关颜色的假设表示歉意，已在我的更新中恢复了以前的颜色并找到了解决方法
感谢您的努力 :)

【解决方案2】：

为您的.s 设置与背景颜色相同的边框。

.s{
  animation: 2s ease-out 0s normal none infinite running r0;
  background: #639dcf none repeat scroll 0 0;	
  border-radius: 50%;
  cursor: pointer;
  border:1px solid #639dcf;
  float: left;
  height: 90px;
  transition: all 0.2s ease 0s;
  width: 90px;
  margin:100px;
}
@-webkit-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}
@-moz-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}
@keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf;
  }
  10% {
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9;
  }
  100% {
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf;
  }
}

&lt;div type="button" id="menuOrb" class="s m1 "&gt;&lt;/div&gt;

【讨论】：