2

我正在使用border-image属性来创建具有 9 片的样式组件。我还使用 csstransform: scale(x)属性根据屏幕尺寸缩小/放大我的元素。我遇到的问题是，当比例设置为整数（如 1、2、3 ......很难修复它。

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。

当 scale 是一个整数时的预期结果，在这种情况下设置为 6：

注意当我将比例设置为 6.25 时的线条

4

1 回答 1

5

如果有人遇到同样的问题，这不太可能，但我确实找到了解决方案，所以我会把它放在那里。

您将需要添加perspective: 1px;到根样式（），然后无论您在哪里使用transform: scale(x);make 它transform: translateZ(0) scale(x);

我仍在试图理解为什么它有效，但至少有效。还有它的 CSS，所以可能会涉及到一些魔法。

于 2019-09-12T18:05:01.117 回答