带有边框半径和溢出隐藏的元素无法正确剪切内容：1px 问题

Question

我正在玩按钮并遇到了这个问题。当按钮有圆角并且里面有一个 before 伪元素来模拟背景（用于过渡）时，我遇到了 1px 问题。before 伪元素没有正确裁剪，您几乎看不到按钮边框和填充颜色之间的某种空间。查看示例：

您会看到在圆形按钮上，边框和元素填充之间有一条细线/空间。

关于如何在保持结构不变的同时消除它的任何线索？

编辑 1. 我知道我可以使用背景代替，但在这种情况下我不能这样做。背景必须通过伪元素完成。

编辑 2. 在 Win 10、Chrome 和 Firefox 上可以看到问题。Firefox 让它更显眼。最新版本：Chrome 60.0.3112.78、Firefox 54.0.1

编辑 3. 编辑代码以显示为什么我不能使用背景属性。

a {
  color: black
}

.anibtn {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
}

.anibtn-round {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
  border-radius: 50px;
}


.tr-fill-on {
  position: relative;
  transition-duration: .3s;
}

.tr-fill-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
}
  
.tr-fill-on:hover {
  color: white;
}

.tr-fill-on:hover:before {
  width:100%;
}




.tr-fill2-on{
  color: white;
  position: relative;
  transition-duration: .3s;
}
.tr-fill2-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tr-fill2-on:hover {
  color: black;
}

.tr-fill2-on:hover:before {
  width:0;
}

<a href="#" class="anibtn tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn tr-fill2-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill2-on">Ani Buttons</a>

Answer 1

使用伪元素作为背景（用于动态效果）和使用实际背景（用于内边框边缘的平滑度）并不相互排斥。如果容器是堆叠上下文的根，则它的背景将始终绘制在任何后代的下方，即使是那些 z 索引为负的容器。将按钮设置为黑色背景（1），使其成为堆叠上下文的根（2），并将伪元素设置为两种颜色，每一半都比按钮的内部区域大一点，并为其位置而不是宽度设置动画解决白色像素问题。

我使用单色渐变而不是纯色作为按钮背景，以防止在不支持渐变的浏览器（如 Opera Mini）中出现黑底黑字按钮文本。transform:translateX如果改变甚至代替 ，transform:translate3d动画可以更加流畅left。

a {
  color: black
}

.anibtn {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
  background: linear-gradient(black,black); /* 1 */
}

.anibtn-round {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
  border-radius: 50px;
  background: linear-gradient(black,black); /* 1 */
}


.tr-fill-on {
  position: relative;
  transition-duration: .3s;
  z-index: 1; /* 2 */
}

.tr-fill-on:before {
  position: absolute;
  content: '';
  background: linear-gradient(90deg, white, white 50%, black 50%);
  transition: all .3s;
  z-index: -1;
  left: -1%;
  top: -1%;
  width: 204%;
  height: 102%;
}
  
.tr-fill-on:hover {
  color: white;
}

.tr-fill-on:hover:before {
  left: -103%;
}




.tr-fill2-on{
  color: white;
  position: relative;
  transition-duration: .3s;
  z-index: 1; /* 2 */
}
.tr-fill2-on:before {
  position: absolute;
  content: '';      
  background: linear-gradient(90deg, white, white 50%, black 50%);
  transition: all .3s;
  z-index: -1;
  left: -103%;
  top: -1%;
  width: 204%;
  height: 102%;
}
.tr-fill2-on:hover {
  color: black;
}

.tr-fill2-on:hover:before {
  left: -1%;
}

<a href="#" class="anibtn tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn tr-fill2-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill2-on">Ani Buttons</a>