使用变换缩放功能时出现白线

Question

我正在使用border-image属性来创建带有 9 切片的样式组件。此外，我还使用 csstransform: scale(x)属性根据屏幕尺寸缩小/放大我的元素。我遇到的问题是，当比例设置为整数（如 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，所以可能涉及到一些魔法。