为什么-moz-border-radius-topright在Google Chrome中不起作用？

I want to use rounded border in my site. So, I use the CSS rounded border property like this:

我想在我的网站中使用圆形边框。所以,我使用CSS圆形边框属性,如下所示:

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

It works well in Firefox, but in Google Chrome, it does not work. Why?

它在Firefox中运行良好,但在谷歌浏览器中,它不起作用。为什么?

3 个解决方案

#1

The reason why, is that is a Mozilla specific (i.e. Firefox) CSS selector. The relevant CSS3 selector would be:

原因是,这是一个特定于Mozilla(即Firefox)的CSS选择器。相关的CSS3选择器将是:

border-top-right-radius

Webkit (i.e. Safari) also has a non-standard selector: -webkit-border-top-right-radius. Since Google Chrome is based on Webkit, I'd expect -webkit-border-top-right-radius to work.

Webkit(即Safari)也有一个非标准的选择器:-webkit-border-top-right-radius。由于Google Chrome基于Webkit,我希望-webkit-border-top-right-radius能够正常运行。

I'd personally include all 3 selectors (as below), then you won't need to edit sometime in the future when everyone catches up with the standard. (Firefox 3.5 is already there as far as I know).

我个人包括所有3个选择器(如下所示),然后当每个人都赶上标准时,您将不需要在将来的某个时间进行编辑。 (就我所知,Firefox 3.5已经存在)。

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

#2

-moz-... is for Firefox etc. Use -webkit-...:

-moz -...适用于Firefox等。使用-webkit -...:

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

Also note the slight difference in syntax.

还要注意语法上的细微差别。

You can combine these as you like. -webkit-... will only be recognized by WebKit browsers (Chrome, Safari), -moz-... will only be recognized by Mozilla-based browsers (Firefox.)

您可以根据需要组合这些。 -webkit -...只能被WebKit浏览器识别(Chrome,Safari),-moz -...只能被基于Mozilla的浏览器识别(Firefox)。

#3

Chrome uses WebKit for rendering, same as Safari. You'll have to add one more CSS property to your class -

Chrome使用WebKit进行渲染,与Safari相同。你必须再为你的类添加一个CSS属性 -

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

#1