论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS教程:圆角代码实现案例

文章类别:div+css | 发表日期:2012-7-13 9:04:24

CSS教程:圆角代码实现案例

 

    其实CSS3实现圆角的方法只需要设置一个属性:border-radius(边框半径),只要设置一个值就能同时设置四个圆角的半径

给你一个DIV



设置他的圆角半径:border-radius:15px;



    border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置2个值,表示左上角和右下角使用第1个值,右上角和左下角使用第2个值。如果设置3个值,表示左上角使用第1个值,右上角和左下角使用第2个值,右下角使用第3个值。如果设置4个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

border-radius 浏览器的支持:
   
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。
    早期版本的Safari和Chrome,支持-webkit-border-radius属性,早期版本的Firefox支持-moz-border-radius属性。
    目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;
border-radius: 15px;


(注意:border-radius必须放在最后声明,否则可能会失效。)

另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。
* -moz-border-radius-topleft(标准语法:border-top-left-radius)
* -moz-border-radius-topright(标准语法:border-top-right-radius)
* -moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)
* -moz-border-radius-bottomright(标准语法:border-bottom-right-radius)

以上就是border-radius简单的实现圆角

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058