如何去除div的轻微白边？

Question

下面是我的代码的一部分。问题是如何在 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;
  }
}

<div type="button" id="menuOrb" class="s m1 "></div>

Answer 1

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

尝试更改关键帧以使用：

  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

FIREFOX 更新

在 OSX Firefox v50.1.0 中进行了测试，您是正确的，由于 border-radius，圆圈周围有一条抗锯齿像素痕迹。为了解决这个问题，我发现的最佳解决方案是利用伪元素 :after 和 "cover" 带有自己边界的违规路径。

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

之前与之后

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

<div type="button" id="menuOrb" class="s m1 "></div>

如何去除div的轻微白边？

How to remove div's slight white edge?

html

css

firefox

mozilla

css-animations