WebKit的边界半径，有时生效

Question

这问题是关于CSS3边框半径属性（的http：// www.css3.info/border-radius-apple-vs-mozilla/ ）

这个问题的一个例子是在这里：

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

在这个URL，我具有圆形出现在FF3要四舍五入div但上Safari和铬圆角不存在。

在式如下：

-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像素高格可以处理为18像素的最大半径。这并不一定很明显在这种情况下，一个92万像素的半径是什么意思。但是，您可以同时指定使用像这样的X和Y半径：

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

（侧面说明，你不应该使用相同的ID为多个HTML元素。您应该使用类代替，所以它说.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规则和铬的支持。这是一个好办法，在IE中也得到圆角使用类似CSS3Pie： http://css3pie.com/

Answer 3

不要你需要应用边框或边框宽度属性以及各种边界半径属性？

另外，我注意到的Safari下降超过一定的半径值半径 - 尝试降低像素值和看看会发生什么。

Answer 4

简单类型只需使用：

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

其中：

border-radius:top right bottom left;