17

这个问题是关于 CSS3 边界半径属性（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 的格式是正确的，所以我对问题所在一无所知。

4

4 回答 4

14

问题似乎出在 92px 的半径上。看起来 20 像素高的 div 可以处理的最大半径是 18px。在这种情况下，92 像素半径的含义并不一定很明显。但是，您可以使用以下方式同时指定 X 和 Y 半径：

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

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

于 2009-07-05T19:08:29.560 回答
2

对于任何在圆角方面寻求帮助的人，我同意 Jacob 关于 Webkit 的回答，但问题还提到 Chrome 无法正常工作。Chrome 使用与 Webkit 完全相同的标准 CSS3 圆角，但在规则上没有前面的“-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 之类的东西在 IE 中获得圆角的好方法：http: //css3pie.com/

于 2011-04-24T18:34:54.200 回答
1

简单类型只需使用：

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

在哪里：

border-radius:top right bottom left;

于 2013-08-27T08:20:49.513 回答
1

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

此外，我注意到 Safari 将半径降低到某些半径值之上 - 尝试减少像素值并看看会发生什么。

于 2009-07-05T09:52:48.810 回答