CSS边框圆角，应该使用哪种样式？border-radius？-webkit-border-radius？-moz-border-radius？

Question

我希望使用CSS来创建漂亮的圆角边框。我已经了解以下CSS样式：

 border-radius
-webkit-border-radius
-moz-border-radius

哪些样式最好使用？

- AnApprentice

Answer 1

您应该使用所有三条规则。

这样，您的页面将在当前版本的Mozilla和WebKit以及实施标准的未来浏览器上运行。

- SLaks

Answer 2

/* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C syntax - likely to be standard so use for future proofing */
border-radius: 5px;

我知道 Internet Explorer 6、7 和 8（据我所知）以及 Opera 不支持圆角。相反，这些用户将看到常规角落。

您可以使用 Firefox 和任何“Mozilla”系列的浏览器开始使用。苹果的 WebKit 网页浏览器引擎也支持圆角，使其在 Safari 和 Chrome 网页浏览器、iPhone 和其他运行 WebKit 的设备中可用。

您可以在此处找到有关您问题的详细答案： http://shapeshed.com/journal/css3_tour_border-radius/ 对于 IE，请使用以下解决方案： http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html http://www.css3.info/a-border-radius-solution/ 在此处查看有关角落的更多有趣信息： http://www.the-art-of-web.com/css/border-radius/

- Jitendra Vyas

---

为什么你使用10像素作为border-radius的值，而不是5像素？只是挑剔一下，但现在看起来其他规则的值必须加倍。 - Marcel Korpel

他只是直接从第一个链接中复制了示例。我已经将它们全部更改为“5px”，因为不应该有任何区别。 - DisgruntledGoat

Opera 10.5现在支持border-radius，IE9也将支持。 - mercator

目前的Chrome和Firefox版本（2011年8月）似乎也支持border-radius。 - Álvaro González

Answer 3

现在你应该使用它们全部。-moz 目标是 Mozilla 浏览器，-webkit 目标是 Webkit 浏览器。从技术上讲，你不需要普通的 border-radius，但最佳实践建议你应该包括它，这样当 CSS3 上线时，你已经实现了它。

- DM.

Answer 4

-webkit-border-radius是针对基于Webkit的浏览器，如Safari和Chrome。 -moz-border-radius是针对Mozilla产品，如Firefox。 border-radius是在标准最终确定时将使用的，尽管Opera目前正在使用它。

使用所有3个以确保最大兼容性。

- hell0w0rld

Answer 5

只需使用“border-radius”，因为大多数网站已经标准化了对CSS的支持，使用“border-radius”也将使该功能在任何其他即将推出的浏览器（例如：IE9或IE10）中工作，而无需任何自定义前缀。

有关“border-radius”属性的更多阅读材料，请参见http://www.learntby.me/css/css_borderadius.php。

- user1584141