如何使用CSS的圆形边框？

Question

新的CSS标准中是否有办法提供圆形边框？ 在CSS级别2中是不可能的。

Answer 1

是。 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 2

它在CSS 3中。

border-radius: 4em;

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

Answer 3

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 4

Thomas Rutter said加上handy resource，因为WebKit和Gecko对top-left等内容使用了不同的属性。