CSS 跨浏览器弯曲边框

Question

定义跨浏览器 CSS/CSS3 兼容/有效弯曲边框的正确/最佳方法是什么？

在跨浏览器兼容的同时，是否有非 JavaScript 的方式这样做？ 如果没有，是否有任何适当的解决方法？

Answer 1

你有没有尝试过：

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

一起？ 这应该涵盖最新版本中的主要 3 个浏览器（至少）。 没有 javascript 或使用图像，您将无法获得完整的跨浏览器覆盖。

Answer 2

请参阅CSS Border Radius Generator （简单圆角）或CSS3 Please （更多效果）以获取纯 CSS 解决方案。 如果您想要在 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+ 中运行而没有图像的东西，请尝试Raphaël 。 这是 Raphaël 的作者Dmitry Baranovskiy的精彩演讲，解释了为什么它很酷。

Answer 3

最好的方法是使用边界半径。

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

这仅在 Safari、Firefox 和 Chrome 中兼容。 这不适用于 IE 7+8（及更少）

如果您想要最大的兼容性但最小的灵活性，图像是要走的路。

如果您想要灵活性和浏览器兼容性，请使用 javascript。 我发现的最好的一个将 CSS3 declatation 转换为 IE 7+8 中的圆角。

在这里检查一个： http : //www.curvycorners.net/

Answer 4

你应该使用这个：

-moz-border-radius: 20px;
border-radius: 20px

WebKit 支持纯border-radius已经有一段时间了。

例如， http: -webkit删除了-webkit前缀。

为了在 Internet Explorer 中完成这项工作，我建议使用CSS3 PIE ，这就像下载一个小文件并将其添加到您的 CSS 中一样简单：

behavior: url(PIE.htc)

当然，这只有在 IE 中打开 Javascript 时才有效（通常是这种情况）。