Question

我想用CSS创建漂亮的圆形边框。我知道以下CSS样式：

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

哪种风格最好用？

Answer 1

你应该使用所有三个规则。

这样，您的页面既适用于当前版本的Mozilla和WebKit，也适用于未来实现该标准的浏览器。

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＆amp; 7和8（据我所知）和Opera不支持圆角。相反，这些用户会看到一个常规角落。

您可以开始使用Firefox和任何“Mozilla”系列浏览器。 Apple的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/

Answer 3

你应该使用所有这些（现在）。 -moz针对Mozilla浏览器，-webkit针对Webkit浏览器。从技术上讲，你不需要普通的border-radius，但是最好的做法是说你应该包括它，所以当CSS3上线时你已经实现了它。

Answer 4

-webkit-border-radius适用于基于webkit的浏览器，例如Safari＆amp;铬。 -moz-border-radius适用于Firefox等Mozilla产品。 border-radius是标准最终确定时使用的内容，尽管Opera目前使用它。

使用全部3以确保最佳兼容性。

Answer 5

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

进一步阅读border-radius属性 http://www.learntby.me/css/css_borderadius.php

CSS Border RADIUS，这是正确使用的样式吗？边界半径？ -webkit-边界半径？ -moz-边界半径？

5 个答案: