如何在CSS上使用圆角边框？

Question

有新的CSS标准提供圆形边框的方法吗？ 这是不可能的CSS级别2

Answer 1

这是在CSS 3

border-radius: 4em;

http://www.w3.org/TR/css3-background/#the-border-radius

Answer 2

Border-radius: create rounded corners with CSS!

这个盒子应该有一个圆角的Firefox，Safari浏览器/ Chrome，Opera和IE9。 这个例子的代码，理论上很简单：

#example1 { 
border-radius: 15px; 
} 

然而，就目前而言，你还需要使用-moz-前缀，以支持Firefox（见的这个浏览器支持部分文章的进一步细节）：

#example1 { 
-moz-border-radius: 15px; 
border-radius: 15px; 
} 

Answer 3

是的。 CSS3已经拥有它。

许多浏览器已经拥有它。

• 在Mozilla中/ Gecko浏览你需要-moz-border-radius虽然他们过渡到border-radius。
• 在Safari/Chrome/webkit浏览器中，您需要-webkit-border-radius。
• IE9及以上需要border-radius（IE8及以下根本不支持）。
• 未来当CSS3被广泛采用时，您只需在所有浏览器中使用border-radius即可。

如果你担心Opera的话，现在最好使用全部三种，再加上-o-border-radius。

Answer 4

什么Thomas Rutter said，再加上这里是handy resource，因为WebKit和壁虎使用不同的属性，如top-left。