使用transfrom缩放父元素时，边框图像显示9条线

Question

我正在使用border-image属性创建具有9个切片的样式化组件。另外，我正在使用css transform: scale(x)属性根据屏幕尺寸缩小/放大元素。我遇到的问题是，当将scale设置为1、2、3等整数时，我的9切片组件看起来很好，但是如果它是浮点型，则边框显示9切片线/间隙，而我很难修复它。

我尝试为border-image-slice和scale设置不同的值。最初认为，当小数点后的数字为奇数时会导致此问题，但这仍然是一个奇数。

<div class="Primary-Back-Button" style="transform: scale(1.2);">
  <button class="Primary-Button" id="">
     <div class="Primary-Button-Content">Button</div>
  </button>
</div>

预期结果将是在使用缩放比例时在边框上不显示任何线/间隙，或者我也愿意更改缩放比例的方式。无论屏幕大小是多少，我基本上都希望在桌面应用程序上保持相同的布局。这是我正在开发的台式机游戏，它在UI端使用JS。

当小数位数是整数时的预期结果，在这种情况下，将其设置为6：

在将比例设置为6.25时注意行

Answer 1

如果有人遇到相同的问题，这是不太可能的，但我确实找到了解决方案，所以我将其解决。

您需要将perspective: 1px;添加到根styles（）中，然后在任何使用transform: scale(x);的地方将其设置为transform: translateZ(0) scale(x);

我仍在努力理解为什么可行，但至少可行。还有它的CSS，所以可能涉及到一些魔术。