4

bordersに適用する幅が異なりますが、 CSS3 Transition Rotateを使用して任意の角度に回転するとdiv、Firefoxのみが薄い継ぎ目を表示します。これらの薄い縫い目は、角度によってわずかに変化します。div

境界線が同じ幅の場合、Firefoxは適切に動作します。

divは画像を使用しておらず、背景は色付きですが、コンテンツは、私が抱えているさまざまな幅の境界線の問題とは無関係のようです。

残念ながら、境界線の後ろの領域は予約されるため、別のdivをラッパーとして使用することはできません。

これは、この問題が発生しているFirefoxで見られる例のjsFiddleです。Chromeには問題はありません。

ステータスの更新： CSSルールごとborder-styleに前に表示されるようにjsFiddleを更新しましたが、変更はありません。border-color

この問題はborder-image、私が使用していないプロパティで、境界スライスごとに1つずつ、最大8つの画像が許可されるためかどうか疑問に思います。そうは言っても、プロパティがあれば、Rotateを使用するときの問題は解決します。border-corner-color

4

2 に答える 2

3

:beforeCSS: 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;
}

基本的に、 を使用して同じ正方形をオーバーレイしますが、とを 1 ピクセル:before減らしてからとを 1 ピクセル増やして、下の「実際の」サイズが同じサイズに見えるようにします。border-topborder-leftwidthheightdiv

sが違うのでborder縫い目の位置が微妙に違うので下が見えません。

于 2012-07-25T21:16:44.817 に答える
0

これらは、境界線をいくつかの別々の部分にペイントすることによるアンチエイリアシング アーティファクトのように見えます。各ピースは回転しているため、エッジがアンチエイリアス処理され、接合部の一部のピクセルが部分的に透明になります (部分的に透明な 2 つのピクセルを重ねてペイントした結果であるため)。

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 に答える