码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 圆角属性 border-radius

时间:2014-10-25 13:14:54      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:http   ar   使用   问题   代码   html   ad   ef   htm   

在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果。这使得制作圆角将不再麻烦,只需对所用对象加一个 border-radius 属性即可,不必使用图片定位或冗余代码完成了。不过它的使用瓶颈目前也是显而易见的,因为效果显示需支持 CSS3 的现代浏览器,而在一些老版本浏览器上则无法显示,如IE8及以下浏览器就不行。

CSS3 圆角属性 border-radius 使用方法:

同时设置四个圆角只需给出一个值即可:border-radius: 10px;

也可以同时单独设置每一个圆角(顺时针方向):border-radius: 10px 5px 15px 20px;

如果只需设置一个圆角,可以写单独CSS设置:

border-top-left-radius: 10px;

border-top-right-radius: 5px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 20px;

还可以每两个圆角设置,即左上右下一个值,右上左下一个值:border-radius: 10px 5px;

CSS3 圆角属性 border-radius 使用注意:

CSS3 部分属性在某些旧版本浏览器上的对应设置有时也不一样,有自己的私有属性,比如部分属性在Firefox上应用需要加上-moz-、Safari以及Google Chrome需加上-webkit-、Opera需加上-o-、Internet Explorer 9需加上-ms-。不过这些问题随着 CSS3 发布推荐标准后,这些浏览器在新版本上都已经做了修改,以支持 CSS3 原生属性。

为了照顾这些旧版本浏览器的浏览,我们可以一并加上这些私有属性。注意,border-radius 需放在最后面,不然可能会失效。如下(border-radius 属性Opera和IE不用设置):

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

此外还需注意的是,Firefox旧版本上的 border-radius 单个圆角属性名称也不一样,它们分别是:

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 5px;

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

-moz-border-radius-bottomright: 20px;

最后还有一点要提示的是:设置 border-radius 属性,最好每个圆角都采用相同的值,如果分别设置,可能在不同浏览器上渲染效果可能会有细微差别。

文章最后分享两个简明 CSS3 border-radius 属性设置在线工具,设置好效果后复制下相应CSS代码添加即可:

http://border-radius.com/,

http://www.css88.com/tool/css3Preview/Border-Radius.html。

CSS3 圆角属性 border-radius

标签:http   ar   使用   问题   代码   html   ad   ef   htm   

原文地址:http://www.cnblogs.com/bigdesign/p/4049954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!