firefox - 使用 CSS3 Rotate 和 Firefox 时如何防止不同宽度的边框出现接缝？

Question

我对 borders 有不同的宽度应用于 div ，当 div 时，只有 Firefox 显示细缝。使用 旋转到任意角度CSS3 过渡旋转 .这些薄接缝根据角度略有变化。

如果边框宽度相同，则 Firefox 表现良好。

div 不使用图像，只是使用彩色背景，但内容似乎与我遇到的不同宽度问题的边框无关。

不幸的是，边界后面的区域将被保留，因此我无法使用另一个 div 作为包装器。

这是一个 jsFiddle在有这个问题的 Firefox 中看到的一个例子。 Chrome 中没有问题。

状态更新:更新了 jsFiddle 以显示 border-style之前 border-color每个 CSS 规则，但没有变化。

请问这个问题是不是因为border-image我没有使用的属性最多允许 八张图片 , 每人一份 边框切片 .也就是说，如果有 border-corner-color属性然后将解决使用旋转时的问题。

Answer 1

我已经使用 :before 做了一个解决方案在 CSS 中:jsFiddle example .

我添加了这个代码:

#thinLinesInFirefox:before {
    content: '';
    display: block;
    width: 201px;
    height: 201px;
    position: absolute;
    top: -105px;
    left: -120px;
    border-top:    104px;
    border-right:  110px;
    border-bottom: 115px;
    border-left:   119px;

    /* Define border-style before border-class per CSS rule. */    
    border-style: solid;

    /* Define boder-color */
    border-color: black;

    z-index: -1;
}

基本上，它使用 :before 覆盖同一个正方形，除了我减少了 border-top和 border-left增加 1 个像素，然后增加 width和 height由 1 像素，以便“真实” div下面似乎是相同的大小。

因为不同 border s，接缝的位置略有不同，所以下面的东西没有显示出来。