定义跨浏览器CSS / CSS3兼容/有效弯曲边框的正确/最佳方法是什么?
在跨浏览器兼容的同时,是否存在非JavaScript方式?如果没有,是否有适当的解决方法?
答案 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中的圆角。
答案 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时才会有效(通常情况下)。