Question

此问题与CSS3 border-radius属性（http://www.css3.info/border-radius-apple-vs-mozilla/）

有关

这个问题的一个例子是：

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

在这个网址中，我有圆角的div在FF3中显示为圆角，但在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。你应该使用类，并调整你的CSS选择器，使其说.round而不是#round。）

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规则，Chrome也支持这些规则。这是使用CSS3Pie：http://css3pie.com/

之类的东西在IE中获得圆角的好方法

Answer 3

您是否需要应用边框或边框宽度属性以及各种border-radius属性？

另外，我注意到Safari将半径降低到某些半径值以上 - 尝试降低像素值和放大倍数。看看会发生什么。

Answer 4

简单类型只需使用：

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

其中：

border-radius:top right bottom left;

Webkit边界半径有时会生效

4 个答案: