17

この問題は、CSS3 border-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は正しくフォーマットされていると確信しているので、問題が何であるかはわかりません。

4

4 に答える 4

14

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

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

（ただし、複数のHTML要素に同じIDを使用しないでください。代わりにクラスを使用し、CSSセレクターを調整して#roundではなく.roundと表示されるようにしてください。）

于 2009-07-05T19:08:29.560 に答える
2

丸みを帯びた角の助けを求めてこれを参照している人にとって、私はWebkitに関するJacobの回答に同意しますが、質問にはChromeが機能しないことも記載されています。Chromeは、Webkitとまったく同じ標準のCSS3の丸みを帯びた角を使用しますが、ルールに先行する「-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;

3番目のルールセットはCSS3ルールであり、Chromeでサポートされています。これは、CSS3Pieのようなものを使用してIEで丸みを帯びた角を取得するための良い方法です：http：//css3pie.com/

于 2011-04-24T18:34:54.200 に答える
1

borderまたはborder-widthプロパティ、およびさまざまなborder-radiusプロパティを適用する必要はありませんか？

また、Safariが特定の半径値を超える半径をドロップしていることに気づきました。ピクセル値を減らしてみて、何が起こるかを確認してください。

于 2009-07-05T09:52:48.810 に答える
1

単純なタイプは使用するだけです：

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

どこ：

border-radius:top right bottom left;

于 2013-08-27T08:20:49.513 に答える