How to prevent seams in borders of different widths when using CSS3 Rotate and Firefox?

问题

I have different widths for borders applied to a div, and only Firefox shows thin seams when the div is rotated to any angle using CSS3 Transition Rotate. These thin seams change slightly depending on angle.

If the borders are the same width, Firefox behaves nicely.

The div is not using an image, just a colored background, but the content seems irrelevant for the border of different widths issue I'm having.

Unfortunately the area behind the border is going to be reserved so I'm not able to use another div as a wrapper.

Here's a jsFiddle of an example to be seen in Firefox that has this issue. There are no issues in Chrome.

Status Update: Updated jsFiddle to show border-style prior to border-color per CSS rule but no change.

I wonder if this issue is because border-image property, which I am not using, allows up to eight images, one for each border slice. That said, if there were border-corner-color properties then that would solve the issue when using Rotate.

回答1:

I have made a solution using :before in CSS: jsFiddle example.

I added this code:

#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;
}

Basically, it overlays the same square using :before, except I have decreased the border-top and border-left by 1 pixel, and then increased the width and height by 1 pixel so that the 'real' div underneath appears to be the same size.

Because of the different borders, the seams are in slightly different positions, so what is underneath doesn't show.

回答2:

Those look like antialiasing artifacts from painting the border in several separate pieces. Each piece is being rotated, so its edges get antialiased, with the result that some pixels at the join are partially transparent (because they're the result of painting two partially-transparent pixels on top of each other).

There is no problem on this testcase in Chrome because at corners it paints the borders under each other. Of course that causes non-opaque borders to be totally broken in Chrome; see http://snook.ca/archives/html_and_css/safari-transparent-borders

And if you were to make the border colors slightly different, you'd get seams in WebKit too. See http://jsfiddle.net/YVCeX/ (it shows seams in the div's background color, whereas Firefox optimizes away background painting under opaque borders, which is why you're seeing red seams, not blue ones.

There's really no good way to handle this, in general, without turning off antialiasing for border edges and having jaggy borders when rotated.

来源：https://stackoverflow.com/questions/10735259/how-to-prevent-seams-in-borders-of-different-widths-when-using-css3-rotate-and-f