4

左上角と右上角を丸くした箱を作りたいです。私のCSS：

border-radius: 4px 4px 0 0;

Safari 6 では、border-radius によって歪みやアーティファクトが発生します。角が「ざらざら」して、不思議な縦の白い線（ボックスの背景は青）が現れます。

すべてを試しました (-webkit-border-radius、border-top-left-radius、border-top-right-radius、border-style:none、border-width:0、border-color:transparent など)。これは壊れていない唯一のもののようです:

border-radius: 4px;
  1. これは Webkit のバグですか? （Chromeにはコーナーアーティファクトがありますが、他にはありません）
  2. そうでない場合、これらの問題に遭遇することなく、左上隅と右上隅だけを丸めるにはどうすればよいですか?
  3. 2012 MacBook Air、OSX Mountain Lion (10.8)、Safari 6.0.1、Chrome 22.0.1229.94 を使用しています。
4

1 に答える 1

0

考えられる答えは次のとおりですが、多くのことを扱っている可能性があるため、@ndm は例を共有する方法について優れた提案をしています。

何が起こっているのかをデバッグしやすくするために、境界線の半径を大きくして、色付きの背景を追加します。

オーバーフロー

ボックス内にコンテンツがあふれて隅を覆っている可能性があります。試してみてください.box { overflow: hidden; }。これは、Safari 6.0.2 で動作する 3 つの一般的なシナリオを検証する JSFiddleです。

アンチエイリアシング

「不思議な白い線」が非常に微妙な場合、境界線をより滑らかに見せようとする Safari のアンチエイリアシングである可能性があります。ボーダーを太くして見た目を比較して、このセオリーを確認してください。

于 2012-11-21T20:12:14.913 に答える