境界線半径と背景グラデーションを適用すると<li>、丸みを帯びた角がぎざぎざで粗く見えます。このjsfiddleでチェックしてください
これはChromeとFFで見られます。グラデーションまたはボーダー半径を削除すると、問題はなくなります。
なぜこれが起こっているのか、どうすれば修正できるのでしょうか?
更新:
Josh F のアイデアに基づいて構築された jQuery ソリューションに取り組んでいます (以下の完全な回答を参照してください)。これは、その背後にある要素の複製コピーを追加する単純な jQuery 関数です。現時点では、スクリプトはターゲット要素の位置を に設定しrelativeます。(場合によっては、これが問題になることもあります。) 私のコードは jsfiddle here にあります。
現在の仕様では、 の外側にbox-shadow描画されるように定義されています。ただし、背景/境界線は、他の要素を考慮せずに、要素を背景に描画します (オブジェクトを描画せず、その上にのみ描画します)。の要素は の前に描画されるため、半透明のエッジで角を描画して、角が滑らかに見えるようにします (そうあるべきです)。残念なことに、仕様がどのように表現されているかにより、要素の後に描画されるため、半透明のエッジでページの上 (要素の後) に描画されます。通常はこれで問題ありませんが、要素と の両方が同じピクセル上に透明なエッジを持っているため、小さな半透明のギャップが生じます。border-boxborder-radiusbox-shadowbox-shadowbox-shadow
これは既知のバグであるか、少なくとも Web デザイン コミュニティではバグと見なされています。私の情報源については、 Bugzilla Bug #474386 (具体的にはコメント #6)を参照してください。
このバグを回避する方法の 1 つは、ボックスよりも 1 ピクセル高く、ボックスの影と同じ色の疑似要素をボックスの後ろに配置することです。これにより、以前は白だったエッジがボックスの影と同じ色または近い色になるため、バグが隠されます。
例については、この jsFiddleを参照してください。