如何删除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之间存在足够差异，因为这似乎是“白色”差距。

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

  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并“覆盖”具有自己边界的违规路径。

<强> 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边框提供与背景颜色相同的边框。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;