CSS Webkit 边框半径有时会生效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1083755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webkit border radius sometimes take effect
提问by jamtoday
This issue is about the CSS3 border-radius property (http://www.css3.info/border-radius-apple-vs-mozilla/)
这个问题是关于 CSS3 border-radius 属性（http://www.css3.info/border-radius-apple-vs-mozilla/）
An example of this problem is here:
这个问题的一个例子在这里：
http://jamtodaycdn.appspot.com/bin/rounded.html
http://jamtodaycdn.appspot.com/bin/rounded.html
In this URL, I have rounded divs that appear to be rounded in FF3, but on Safari and Chrome the rounded corners are not there.
在这个 URL 中，我有圆形的 div，在 FF3 中看起来是圆形的，但在 Safari 和 Chrome 上，圆角不存在。
The style is as follows:
样式如下：
-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;
I'm fairly sure that this CSS is formatted correctly, so I'm clueless as to what the problem is.
我相当确定这个 CSS 的格式正确，所以我不知道问题是什么。
采纳答案by Jacob
The problem appears to be in the 92px radia. It looks like the maximum radius that the 20-pixel-high div can handle is 18px. It's not necessarily obvious what a 92 pixel radius means in that case. However, you can specify both an X and Y radius using something like this:
问题似乎出在 92px 半径上。看起来 20 像素高的 div 可以处理的最大半径是 18 像素。在这种情况下，92 像素半径意味着什么并不一定很明显。但是，您可以使用以下内容同时指定 X 和 Y 半径：
-webkit-border-bottom-right-radius: 92px 18px;
(side note, you shouldn't use the same ID for multiple HTML elements. You should use class instead, and adjust your CSS selector so it says .round instead of #round.)
（旁注，您不应该对多个 HTML 元素使用相同的 ID。您应该使用 class 代替，并调整您的 CSS 选择器，使其显示为 .round 而不是 #round。）
回答by slave2zeros
For anyone referring to this for help with rounded corners, I agree with Jacob's answer regarding Webkit, but the question also mentioned Chrome not working. Chrome uses standard CSS3 rounded corners which are exactly like Webkit's, but without the preceding '-webkit-' on the rule. These are as follows:
对于任何提到此问题以寻求圆角帮助的人，我同意 Jacob 关于 Webkit 的回答，但该问题还提到 Chrome 无法正常工作。Chrome 使用标准的 CSS3 圆角，这与 Webkit 的完全一样，但规则中没有前面的“-webkit-”。这些如下：
border-bottom-right-radius:2px;
To take into account Firefox, Webkit and Chrome, you'd need to do something like this:
要考虑 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;
The third set of rules are CSS3 rules and are supported by Chrome. This is a good way to also get rounded corners in IE using something like CSS3Pie: http://css3pie.com/
第三组规则是 CSS3 规则，Chrome 支持。这是使用 CSS3Pie 之类的东西在 IE 中获得圆角的好方法：http://css3pie.com/
回答by IRvanFauziE
simple type just use:
简单类型只需使用：
border-radius:92px 92px 2px 2px;
border-radius:92px 92px 2px 2px;
where:
在哪里：
border-radius:top right bottom left;
border-radius:top right bottom left;
回答by Mark Beaton
Don't you need to apply a border or border-width property as well as the various border-radius properties?
您不需要应用边框或边框宽度属性以及各种边框半径属性吗？
Also, I've noticed Safari dropping the radius above certain radius values - try reducing the pixel values & see what happens.
另外，我注意到 Safari 将半径降低到某些半径值以上 - 尝试减少像素值并看看会发生什么。
