Question

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

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

Answer 1

你试过了吗？

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

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

Answer 2

仅针对CSS解决方案，请参阅CSS Border Radius Generator（简单圆角）或CSS3 Please（更多效果）。如果您想要在Firefox 3.0 +，Safari 3.0 +，Chrome 5.0 +，Opera 9.5+和Internet Explorer 6.0+中使用无图像的功能，请尝试Raphaël。这是Raphaël的作者nice talk by Dmitry Baranovskiy，解释了为什么它很酷。

Answer 3

最好的方法是使用border-radius。

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

这仅适用于Safari，Firefox和Chrome。这不适用于IE 7 + 8（及更少）

如果您想获得最大的兼容性，但灵活性最低，那么图像就是您的最佳选择。

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

检查一下：http://www.curvycorners.net/

Answer 4

你应该用这个：

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

WebKit暂时支持普通border-radius。

例如，

http://css3generator.com/已删除-webkit前缀。

要在Internet Explorer中使用此功能，我建议使用CSS3 PIE，这就像下载一个小文件一样简单，并将其添加到您的CSS中：

behavior: url(PIE.htc)

当然，只有在IE中启用Javascript时才会有效（通常情况下）。

CSS跨浏览器弯曲边框

4 个答案: