Webkit边界半径有时会生效

此问题与CSS3 border-radius属性有关(http://www.css3.info/border-radius-apple-vs-mozilla/)

这个问题的一个例子是:

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

在这个URL中,我有圆形的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格式正确,所以我对问题是什么一无所知.

问题似乎出现在92px radia中.看起来20像素高div可以处理的最大半径是18px.在这种情况下,92像素半径意味着什么并不一定明显.但是,您可以使用以下内容指定X和Y半径:

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

(注意,你不应该对多个HTML元素使用相同的ID.你应该使用类,并调整你的CSS选择器,使其说.round而不是#round.)