Html 边界半径和溢出隐藏don'；t正确剪辑内容：1px问题

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

您将看到，在圆形按钮上，在边框和元素填充之间有一条很小的线/空间

关于如何在保持结构不变的情况下消除它，有什么线索吗

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

编辑2。这个问题可以在Win10、Chrome和Firefox上看到。Firefox让它更具可视性。最新版本：Chrome 60.0.3112.78、Firefox 54.0.1

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

a{
颜色：黑色
}
.anibtn{
显示：内联块；
溢出：隐藏；
填充：8px 20px；
保证金：0 3px 6px 3px；
文本对齐：居中；
边框：实心10px黑色；
文字装饰：无；
颜色：$btncolor；
空白：nowrap；
}
.anibtn轮{
显示：内联块；
溢出：隐藏；
填充：8px 20px；
保证金：0 3px 6px 3px；
文本对齐：居中；
边框：实心10px黑色；
文字装饰：无；
颜色：$btncolor；
空白：nowrap；
边界半径：50px；
}
.tr填写{
位置：相对位置；
过渡时间：.3s；
}
.tr填写日期：之前{
位置：绝对位置；
内容：''；
背景：黑色；
过渡时间：.3s；
z指数：-1；
左：0；
排名：0；
宽度：0；
身高：100%；
}
.tr加注：悬停{
颜色：白色；
}
.tr填充打开：悬停：之前{
宽度：100%；
}
.tr-fill2-on{
颜色：白色；
位置：相对位置；
过渡时间：.3s；
}
.tr-fill2-on：之前{
位置：绝对位置；
内容：''；
背景：黑色；
过渡时间：.3s；
z指数：-1；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
.tr-fill2-on:悬停{
颜色：黑色；
}
.tr-fill2-on:悬停：之前{
宽度：0；
}

编辑：

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

不要设置

边框

，而是将其设置为

边框阴影

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

---

现在，这条线将消失；）

如果不需要，您可以删除

溢出：隐藏和
空白：nowrap希望它能帮助您


a{
颜色：黑色
}
.anibtn{
显示：内联块；
填充：8px 20px；
保证金：0 3px 6px 3px；
文本对齐：居中；
边框：实心10px黑色；
文字装饰：无；
颜色：$btncolor；
}
.anibtn轮{
显示：内联块；
填充：8px 20px；
保证金：0 3px 6px 3px；
文本对齐：居中；
边框：实心10px黑色；
文字装饰：无；
颜色：$btncolor；
边界半径：50px；
}
.tr填写{
位置：相对位置；
过渡时间：.3s；
}
.tr填写日期：之前{
位置：绝对位置；
内容：''；
背景：黑色；
过渡时间：.3s；
z指数：-1；
左：0；
排名：0；
宽度：0；
身高：100%；
}
.tr加注：悬停{
颜色：白色；
}
.tr填充打开：悬停：之前{
宽度：100%；
}
.tr-fill2-on{
颜色：白色；
位置：相对位置；
过渡时间：.3s；
}
.tr-fill2-on：之前{
位置：绝对位置；
内容：''；
背景：黑色；
过渡时间：.3s；
z指数：-1；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
.tr-fill2-on:悬停{
颜色：黑色；
}
.tr-fill2-on:悬停：之前{
宽度：0；
}
使用伪元素作为背景（用于动态效果）和使用实际背景（用于内边框的平滑度）并不是相互排斥的。如果容器是堆叠上下文的根，则其背景将始终绘制在任何子体的下方，即使是具有负z索引的子体。为按钮（1）设置黑色背景，使其成为堆叠上下文（2）的根，并使伪元素为双色，每半个都比按钮的内部区域大一点，并设置其位置而不是宽度的动画，似乎可以解决白色像素的问题

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


a{
颜色：黑色
}
.anibtn{
显示：内联块；
溢出：隐藏；
填充：8px 20px；
保证金：0 3px 6px 3px；
文本对齐：居中；
边框：实心10px黑色；
文字装饰：无；
颜色：$btncolor；
空白：nowrap；
背景：线性渐变（黑色，黑色）；/*1*/
}
.anibtn轮{
显示：内联块；
溢出：隐藏；
填充：8px 20px；
保证金：0 3px 6px 3px；
文本对齐：居中；
边框：实心10px黑色；
文字装饰：无；
颜色：$btncolor；
空白：nowrap；
边界半径：50px；
背景：线性渐变（黑色，黑色）；/*1*/
}
.tr填写{
位置：相对位置；
过渡时间：.3s；
z指数：1；/*2*/
}
.tr填写日期：之前{
位置：绝对位置；
内容：''；
背景：线性梯度（90度，白色，白色50%，黑色50%）；
过渡：全部3秒；
z指数：-1；
左-1%；
前-1%；
宽度：204%；
身高：102%；
}
.tr加注：悬停{
颜色：白色；
}
.tr填充打开：悬停：之前{
左-103%；
}
.tr-fill2-on{
颜色：白色；
位置：相对位置；
过渡时间：.3s；
z指数：1；/*2*/
}
.tr-fill2-on：之前{
位置：绝对位置；
内容：''；
背景：线性梯度（90度，白色，白色50%，黑色50%）；
过渡：全部3秒；
z指数：-1；
左-103%；
前-1%；
宽度：204%；
身高：102%；
}
.tr-fill2-on:悬停{
颜色：黑色；
}
.tr-fill2-on:悬停：之前{
左边