4

我有不同的宽度borders应用于 a ，当使用CSS3 Transition Rotate旋转到任何角度div时，只有 Firefox 显示细缝。这些细缝根据角度略有变化。div

如果边框宽度相同，Firefox 的表现会很好。

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

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

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

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

我想知道这个问题是否是因为border-image我没有使用的属性允许最多八张图像，每个边框切片一张。也就是说，如果有border-corner-color属性，那么在使用 Rotate 时可以解决问题。

4

2 回答 2

3

我: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-topand减小了border-left1 个像素，然后将widthand增加了height1 个像素，以便div下面的“真实”看起来是相同的大小。

由于borders 不同，接缝位置略有不同，所以下面的内容不显示。

于 2012-07-25T21:16:44.817 回答
0

这些看起来像是通过在几个单独的部分中绘制边界的抗锯齿伪影。每一块都在旋转，因此它的边缘得到抗锯齿，结果连接处的一些像素是部分透明的（因为它们是在彼此顶部绘制两个部分透明像素的结果）。

Chrome 中的这个测试用例没有问题，因为它在角落处绘制了彼此下方的边框。当然，这会导致 Chrome 中的非透明边框被完全破坏；见http://snook.ca/archives/html_and_css/safari-transparent-borders

如果你要让边框颜色略有不同，你也会在 WebKit 中得到接缝。请参阅http://jsfiddle.net/YVCeX/（它以 div 的背景颜色显示接缝，而 Firefox 优化了不透明边框下的背景绘画，这就是为什么您看到红色接缝而不是蓝色接缝的原因。

一般来说，没有关闭边界边缘的抗锯齿和旋转时有锯齿状边界的情况下，确实没有很好的方法来处理这个问题。

于 2012-05-24T20:30:18.090 回答