Css Chrome：不透明度对象上的边框宽度不一致

当不透明度应用于具有边框的对象时，Chrome似乎不一致地渲染具有边框的对象。当边框为1px时，此问题尤其明显，当边框位于像素之间时会出现此问题。但是，如果未应用不透明度，则Chrome将始终渲染边框

.btn{
保证金：0；
填充：12px 24px；
光标：指针；
字体：无衬线；
字体大小：14px；
背景色：透明；
颜色：rgba（0,0,0,0.7）；
边框：1px纯色；
边界半径：3px；
}
.不透明度{
不透明度：0.5；
}

按钮
按钮
按钮
按钮
按钮
按钮

经过一点实验，我通过添加

转换找到了一个解决方法：translateZ（0）到不透明度的元素。我不知道这到底是为什么，但我相信这与Chrome处理动画的不同方式有关，与
transform
Chrome假设动画有关


.btn{
保证金：0；
填充：12px 24px；
光标：指针；
字体：无衬线；
字体大小：14px；
背景色：透明；
颜色：rgba（0,0,0,0.7）；
边框：1px纯色；
边界半径：3px；
}
.不透明度{
不透明度：0.5；
变换：translateZ（0）；
}

按钮
按钮
按钮
按钮
按钮
按钮
在任何缩放级别，我都看不出任何错误。您是否在Mac上使用旧版本的Chrome？版本65.0.3325.181。我可能还应该添加一个屏幕截图。这样做时，你可以启用GPU加速：没错，所以我希望有人有更好的答案。不，我不这么认为，这是我猜的唯一方式。。。因为它不依赖于CSS，而是依赖于浏览器渲染。。。CPU本身很弱，因此启用GPU可以获得更好的渲染效果