如何解决scale3d上的CSS错误

当您将按钮悬停在Chrome上时，它的边框会变薄，并且会根据页面的元素和位置而变化。在我看来，中小型按钮也有同样的问题。Firefox的内部部分也有点奇怪（如果您测试它，您就会理解）

我不知道如何解决此错误…以下是代码，请查看此视频以获得更清晰的视图： bit.ly/2QBjW0s

正文{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
高度：300px；
}
.小{
宽度：150px；
填充：21px 0 18px 0；
字体大小：15px；
边缘顶部：15px；
}
.中等{
宽度：210px；
填充：27px 0 24px 0；
边缘底部：15px；
边缘顶部：15px；
}
.大{
宽度：257px；
填充：33px 0 30px 0；
字号：21px；
边缘底部：15px；
}
.FrameEffectMain{
边界：无；
位置：相对位置；
}
.FrameEffectMain:：在，
.FrameEffectMain:：之后{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.红框效应{
颜色：#fff；
背景：无；
}
.红框效应范围{
显示：内联块；
位置：相对位置；
颜色：#fff；
}
.RedFrameEffect:：之前{
内容：''；
背景：ef476f；
变换：变换0.3s三次贝塞尔（0.2,1,0.7,1）；
}
.RedFrameEffect:悬停：：之前{
变换：scale3d（0.9,0.75,1）；
}
.RedFrameEffect:：之后{
内容：''；
边框：2.1px实心#ef476f；
变换：变换0.3s三次贝塞尔（0.2,1,0.7,1）；
边界半径：0px；
变换：scale3d（0.85,0.65,1）；
}
.RedFrameEffect:悬停：：之后{
变换：scale3d（1,1,1）；
}

找到更多
找到更多
找到更多

这是因为，这意味着当您为其指定100%宽度和高度时，添加的边框宽度实际上会添加到该高度的顶部，从而导致

：：after

伪元素的右边缘和下边缘超出100%宽度/高度

要解决此问题，请在伪元素上使用

box size:border box

。如果在样式表中包含CSS重置，这不会是问题（因为大多数重置都有

*，*：：之前，*：：之后{box size:border box}

）

.FrameEffectMain::before,
.FrameEffectMain::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Add this! */
  box-sizing: border-box;
}

附言：使用

2.1px

边框没有意义：使用整数值，即

2px

请参见下面的概念验证示例：

正文{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
高度：300px；
}
.小{
宽度：150px；
填充：21px 0 18px 0；
字体大小：15px；
边缘顶部：15px；
}
.中等{
宽度：210px；
填充：27px 0 24px 0；
边缘底部：15px；
边缘顶部：15px；
}
.大{
宽度：257px；
填充：33px 0 30px 0；
字号：21px；
边缘底部：15px；
}
.FrameEffectMain{
边界：无；
位置：相对位置；
}
.FrameEffectMain:：在，
.FrameEffectMain:：之后{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
/*加上这个*/
框大小：边框框；
}
.红框效应{
颜色：#fff；
背景：无；
}
.红框效应范围{
显示：内联块；
位置：相对位置；
颜色：#fff；
}
.RedFrameEffect:：之前{
内容：''；
背景：ef476f；
变换：变换0.3s三次贝塞尔（0.2,1,0.7,1）；
}
.RedFrameEffect:悬停：：之前{
变换：scale3d（0.9,0.75,1）；
}
.RedFrameEffect:：之后{
内容：''；
边框：2px实心#ef476f；
变换：变换0.3s三次贝塞尔（0.2,1,0.7,1）；
边界半径：0px；
变换：scale3d（0.85,0.65,1）；
}
.RedFrameEffect:悬停：：之后{
变换：scale3d（1,1,1）；
}

找到更多
找到更多
找到更多

问题仍然存在……您可以在小屏幕上查看您的示例button@Ace我看不出来……请看这个屏幕截图，它是根据您的代码得出的结果。bit.ly/3f7zlitI意识到当人们放大时，它会恢复正常。但它无法解决基本问题。