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-

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

# -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;