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

Posted 2023-03-06

【中文标题】使用 CSS3 Rotate 和 Firefox 时如何防止不同宽度的边框出现接缝？

【英文标题】：How to prevent seams in borders of different widths when using CSS3 Rotate and Firefox?

【发布时间】：2012-05-30 21:43:49

【问题描述】：

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

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

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

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

这是一个jsFiddle 的示例，可以在 Firefox 中看到该示例。 Chrome 中没有问题。

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

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

【问题讨论】：

反对者，请提供反馈。谢谢。

【参考方案1】：

我在 CSS 中使用:before 做了一个解决方案：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 下面的大小似乎相同。

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

【讨论】：

糟糕，我没有注意到由于覆盖，文本无法选择，链接也无法点击...

+1 很好的答案！将z-index 添加到您的标记中可以选择文本，这是最好的解决方法，直到 Firefox（预期为 v16）能够直接解决此问题。参考：jsFiddle

@arttronics - 这很奇怪，我尝试使用 z-index: -1 并没有用，但它可以在你的小提琴中使用！另外，我正在使用 Firefox Aurora 16.0a2 (2012-07-25)，它还没有修复...

Firefox 最近出现了问题。最近发布的 v14 stable 有一个 CSS3 转换问题（这与已删除的 skew() 无关），这个不相关的 jsFiddle 在Firefox V13 and Chrome 中工作。 Firefox v16 路线图将提供额外的 CSS3 规则，应用时应解决此问题的问题（即关闭硬件抗锯齿）。

【参考方案2】：

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

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

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

真的没有很好的方法来处理这个，一般来说，不关闭边界边缘的抗锯齿并且在旋转时有锯齿状的边界。

【讨论】：

我不知道 Chrome 在与 CSS3 Rotate 一起使用时存在边框颜色错误，边框具有不同或相同的宽度。请参阅jsFiddle 的此更新，它使用图像而不是背景颜色并显示图像，即使最大图像仅限于特定尺寸。将带有背景附件的图像设置为本地，然后仅使主体背景颜色流血。但是，我不打算拥有多色边框并且没有图像内容，所以如果您可以更新我的 jsFiddle，展示如何关闭边框边缘的抗锯齿，这正是我所需要的，锯齿状和所有。

你不能自己关闭抗锯齿功能......关键是，如果浏览器想要消除这些接缝效果，就必须选择更多锯齿状的渲染。

我记得读到 Chrome 不像 Firefox 那样对旋转图像 here 应用抗锯齿。 SO Post 说要使用 backface-visibility: hidden; 来关闭抗锯齿功能。这适用于您的jsFiddle 和我的jsFiddle，但不适用于 Firefox。