Webkit边框半径有时会生效答案

【问题标题】：Webkit border radius sometimes take effectWebkit边框半径有时会生效
【发布时间】：2009-07-05 09:40:18
【问题描述】：

这个问题是关于 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 格式正确，所以我不知道问题出在哪里。

【问题讨论】：

标签： webkit css

【解决方案1】：

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

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

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

【讨论】：

关于 ID 的要点。这是我在几秒钟内破解的东西，但这总是很好的建议。
最大半径部分是有道理的，但这种行为的错误部分是，如果它不能按照指定的方式渲染边框，它根本不会环绕边框，而 Mozilla 会渲染边框尽可能多。

【解决方案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/

【讨论】：

【解决方案3】：

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

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

【讨论】：

关于第一段，不，您无需指定“border”或“border-width”属性即可使用“border-radius”属性。

【解决方案4】：

简单类型只需使用：

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

地点：

border-radius:top right bottom left;

【讨论】：