在Firefox中使用半径旋转边框，抗锯齿？

Question

.dice {
      margin: 4.5px auto;
      width: 40px;
      height: 34px;
      border: 1px solid black;
      border-radius: 9px;
      background-color: ghostwhite;
      transition: 900ms ease all;
      text-align: center;
      line-height: 10px;
      padding-top: 5px;
    }

<div class="dice">1</div>
<div class="dice" id="rotated" onclick="this.style.transform = 'rotate('+ (1*-90) +'deg)';">2</div>

我有一个想要旋转 90 度的骰子（单击“2”）。它的边界半径在变换旋转之前看起来很好，但之后看起来很乱。尤其是变换后的 FF 中弯曲的边缘很脏。

这是一个应该说明问题的图像，左上角骰子有锯齿/抗锯齿边框。 image

[显然嵌入图像很难]

这是一个示例，虽然可能有点难以理解： https://jsfiddle.net/39m2wqua/

我已经阅读了一些关于亚像素/半像素渲染的帖子，尝试添加阴影框或 translateZ(1px) 到变换，但似乎没有任何东西可以解决这个问题。这是一个类似的线程：Anti-aliasing on rotated div with border image in firefox

Answer 1

我自己测试了它（在 Firefox 上），它看起来非常好。
我建议使用高清或矢量图像。

否则，请检查此post。 （可能有帮助）