边框半径和隐藏溢出的元素不会正确剪辑内容：1px问题

Question

我正在玩按钮并遇到了这个问题。当按钮有圆角并且其中有一个前面的伪元素来模拟背景（用于转换）时，我得到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-index的后代。将黑色背景设置为按钮（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>

Answer 2

编辑：

我找不到问题，但我找到了另一种方法;）

而不是设置border，将其设为border-shadow

.anibtn-round {
  /* border: solid 2px black; */
  box-shadow: inset 0px 0px 0px 2px black;
}

现在该线将消失;）

Answer 3

如果不需要，您可以删除overflow: hidden;和white-space: nowrap;，希望它能为您提供帮助。

a {
  color: black
}

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

.anibtn-round {
  display: inline-block;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  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>