Webkitの境界半径は時々有効になります

Question

この問題は、CSS3ボーダー-radiusプロパティ（のhttpについてです：// www.css3.info/border-radius-apple-vs-mozilla/する）

この問題の例はここにあります：

http://jamtodaycdn.appspot.com/bin/rounded.htmlする

このURLで、私はFF3に丸めているように見えるdivを四捨五入しているが、SafariとChromeで丸みを帯びた角がありません。

次のように

スタイルがあります：

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

私はこのCSSが正しくフォーマットされていることをかなり確信しているので、私は問題が何であるかについての無知です。

Answer 1

問題は92pxののRadiaであるように思われます。 20ピクセルの高さのdivが処理できる最大半径が18pxであるように見えます。これは、92ピクセルの半径が、その場合には何を意味するのかは必ずしも明らかではありません。しかし、あなたはこのようなものを使ってXとYの半径の両方を指定することができます：

-webkit-border-bottom-right-radius: 92px 18px;

（サイドノートでは、あなたがあなたの代わりにクラスを使用する必要があります。複数のHTML要素に同じIDを使用し、それが.round代わり#roundの言うように、あなたのCSSセレクタを調整するべきではありません。）

Answer 2

角の丸いヘルプはこれに言及する人にとって、私はWebkitのに関するヤコブの答えに同意するが、質問も動作していないChromeを述べました。 Chromeは標準CSS3が正確にWebKitのようなものでコーナーを丸めますが、ルール上、先行する「-webkit-」せずに使用しています。これらは以下の通りです：

border-bottom-right-radius:2px;

アカウントのFirefox、WebkitのとChromeに取るために、あなたはこのような何かをする必要があると思います：

-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;

ルールの第三のセットは、CSS3のルールであり、クロムによって支持されています。これはCSS3Pieのようなものを使用してもIEで丸みを帯びた角を得るための良い方法です： http://css3pie.com/する

Answer 3

あなたは国境や境界線-widthプロパティだけでなく、様々なボーダー半径プロパティを適用する必要はないのですか？

また、私が気づいたSafariがある半径値以上の半径を落とす - 。ピクセル値を下げてみてください＆何が起こるか見て

Answer 4

単純型だけで使用します：

border-radius:92px 92px 2px 2px;

ここで、

border-radius:top right bottom left;