4

参考までに、この質問を参照してください: Chrome Radial CSS gradient Smoothness .

OPはグラデーションの滑らかさに問題がありますが、議論から、それはアルファ透明度を使用する場合のみのようです.

私が使用しているグラデーションは次のとおりです。

div {
    background: radial-gradient(
        #000 30%,
        transparent 30%, transparent 40%,
        #000 40%, #000 60%,
        transparent 60%
    );
}

ご覧のとおり、ハード ストップ (色の遷移なし) と no rgba(アルファもなし) を使用しています。それでも、Chrome (Windows 7 の 23 でテスト済み) では、非常にピクセル化されてレンダリングされます。

ここに画像の説明を入力

これはChromeがこれらを処理する方法ですか、それとも何か不足していますか? 少し滑らかにするためにできることはありますか（明らかに画像を使用する以外に）？

これがフィドルです：http://jsfiddle.net/wARGc/

更新: この のバグ レポートを提出しました。

4

1 に答える 1

2

これは Chrome によるレンダリングの問題で、形状を少し調整することで自分でスムージングを作成できます。あなたのフィドルへの私の更新を見てください

http://jsfiddle.net/jamestoone/XU7jB/

div {
    width: 100px;
    height: 100px;
    background: radial-gradient(#000 30%, transparent 30%, transparent 40%, #000 40%, #000 60%, transparent 60%);
}

div.new {
    background: radial-gradient(#000000 30%, transparent 32%, transparent 38%, #000000 40%, #000000 60%, transparent 62%) repeat scroll 0 0 transparent;
    height: 100px;
    width: 100px;
}
于 2012-11-20T13:49:05.523 に答える