在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。(这可能会有帮助)