CSS跨浏览器弯曲边框

时间:2011-02-17 23:52:41

标签: javascript html css css3

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

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

4 个答案:

答案 0 :(得分:3)

你试过了吗?

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

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

答案 1 :(得分: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,解释了为什么它很酷。

答案 2 :(得分:1)

最好的方法是使用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/

答案 3 :(得分:1)

你应该用这个:

-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时才会有效(通常情况下)。