CSS3新特性----- 实现圆角

从web2.0开始，开始流行使用圆角，如果你不使用圆角，你的网站可能不会被列入web2.0网站。主要问题是，你至少需要4个图片（每个角一个）和一些JS或复杂的层来实现圆角。

这些将成为过去了！两行就足够了：

css代码:

.round{

background-color:#666;

color:#fff;

line-height:20px;

width:200px;

padding:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

}

那么，有什么新东西？实际上CSS3的声明是border-radius。到目前为止，这个特性尚未确定，众多浏览器生产商通过前缀支持该属性。Firefox使用-moz-，Safari使用-webkit-

这里同样支持你选择哪个角使用圆角，这可以通过使用“TopLeftTopRightBottomRightBottomLeft”实现。示例：

#-moz-border-radius-topleft/-webkit-border-top-left-radius

#-moz-border-radius-topright/-webkit-border-top-right-radius

IE下设置：

-khtml-border-radius:5px;（IE9是支持的，不知道IE8及以下支持的情况）

总结：

兼容不同浏览器圆角设置：

-moz-border-radius:5px;

-khtml-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;