Google Chromeで-moz-border-radius-toprightが動作しないのはなぜですか？

Question

私のサイトでは丸みのあるボーダーを使いたいです。

-moz-border-radius-topright: 7px; 

それは、Firefoxでうまく動作しますが、Google Chromeで、それは動作しません：だから、私はこのようなCSS丸めボーダープロパティを使用します。どうして？

Answer 1

、それはMozillaの特定（すなわち、Firefoxの）CSSセレクタである理由。関連CSS3セレクタは次のようになります。-webkit-border-top-right-radius：

border-top-right-radius 

のWebkit（すなわち、サファリ）は、非標準のセレクタを有しています。 Google ChromeはWebkitをベースにしているので、私は-webkit-border-top-right-radiusがうまくいくと思っています。

私は個人的に3つのセレクタをすべて含んでいます（以下のように）、誰でも標準に追いつく将来、いつか編集する必要はありません。 （Firefox 3.5はすでに私が知っている限りそこにある）。

.thing{ 
...some styles... 
-moz-border-radius-topright:7px; 
-webkit-border-top-right-radius:7px; 
border-top-right-radius:7px; 
} 

Answer 2

-moz- ... Firefoxのなどが-webkit-を使用するために...です：

-webkit-border-top-right-radius: 7px; 
-moz-border-radius-topright: 7px; 

はまた、構文のわずかな違いに注意してください。

好きなように組み合わせることができます。 -webkit- ...唯一のWebKitブラウザ（クローム、サファリ）、-moz-によって認識される...唯一のMozillaベースのブラウザによって認識されます（Firefoxの。）

Answer 3

Chromeは、Safariのと同じレンダリングするためのWebKitを使用しています。あなたのクラスに1つのより多くのCSSプロパティを追加する必要があります -

.YourClass 
{ 
    -moz-border-radius-topright: 7px; /* For Mozilla browsers */ 
    -webkit-border-top-right-radius: 7px; /* For WebKit-based browsers */ 
}