webkit 边框半径有时会生效

Question

这个问题是关于 CSS3 border-radius 属性 ( http://www.css3.info/border-radius-apple-vs-mozilla/ )

此问题的示例如下:

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

在这个 URL 中，我有圆 Angular 的 div，在 FF3 中看起来是圆的，但在 Safari 和 Chrome 上没有圆 Angular 。

样式如下:

-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 半径范围内。看起来 20 像素高的 div 可以处理的最大半径是 18px。在这种情况下，92 像素半径的含义并不一定很明显。但是，您可以使用如下方式同时指定 X 和 Y 半径:

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

(旁注，您不应该为多个 HTML 元素使用相同的 ID。您应该改用 class，并调整您的 CSS 选择器，使其显示 .round 而不是 #round。)