【css 3.0】Border-radius,运用css样式创建圆角

发表时间：09-3-14 来源：电脑故障网点击：

W3C在CSS3中已经提供有一些新的选项，使用得在处理圆角的时候特别有用，其中就有Border-radius。Mozila、Firefox和Safari 3这几款浏览器都支持该功能。这样我们就可以运用CSS样式来实现圆角的效果啦。
下面是一个很简单、直观的例子：

coner
而实现这个例子的css代码如下：

#coner{width:200px;
height:40px;
background-color: #f3f3f3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #999;
padding: 5px;
}

同样的，还可以实现单个角是圆角，或者只需两个角是圆角，这些都可以很容易实现。看下面的代码：

    * -moz-border-radius-topleft  / -webkit-border-top-left-radius
    * -moz-border-radius-topright / -webkit-border-top-right-radius
    * -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
    * -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

上面的代码中-moz-是支持firfox浏览器的，而-webkit-是表示支持safari/Chrome浏览器。
你可以运行代码试试看效果，简单实用，并且美观。

上一篇:模块化CSS 加快网页显示速度，加强css管理下一篇:网站设计中结构，表现与行为的分离

【收藏】【推荐】【返回顶部】【打印本页】【关闭窗口】

【css 3.0】Border-radius,运用css样式创建圆角

发表时间：09-3-14 来源：电脑故障网点击：

相关文章列表

最新文章

本月排行榜

文章推荐

【css 3.0】Border-radius,运用css样式创建圆角

发表时间：09-3-14 来源：电脑故障网 点击：pubajax('/click.aspx','id=198213984476','click_198213984476');

相关文章列表

最新文章

本月排行榜

文章推荐

发表时间：09-3-14 来源：电脑故障网点击：