border-radius与圆角 - 网页制作 - 蓝色理想
您的位置：　 &
& border-radius与圆角
　border-radius与圆角
作者：　时间： 　文档类型：原创　来自：
两年前发表的中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死， 的Nicole在讲演中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在
中就加入了一个叫
的属性，通过它可以直接来定义HTML元素的圆角。
CSS3的border-radius规范
中其主要信息如下：
属性：border-top-right-radiusborder-bottom-right-radiusborder-bottom-right-radiusborder-bottom-right-radius值：&length& &length&?。它们分别是定义角形状的四分之一椭圆的两个半径。如图：
第一个值是水平半径。
如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
如果任意一个值为0，则这个角是矩形，不会是圆的。
值不允许是负值。
属性：border-radius。它是上面四个属性值的简写。值：&length&{1,4} [ / &length&{1,4} ]?
如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半径。如果没有斜线，则水平半径和垂直半径相等。
四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。
应用范围：所有的元素，除了table的样式属性border-collapse是collapse时
内边半径等于外边半径减去对应边的厚度。当这个结果是负值时，内边半径是0。所以内外边曲线的圆心并不一定是一致的。
border-radius也会导致该元素的背景也是圆的，即使border是none。如果是padding-box，则背景（background）会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
所有的边框样式（solid、dotted、inset等）都遵照角的曲线。如果设置了border-image，则曲线以外的部分会被裁剪掉。
如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
角不允许相互重叠，所以当相邻两个角半径的和大于所在矩形区域的大小时，用户代理（浏览器）比如缩小一个或多个角半径。运算法则如下：f = min(Li/Si)，i ∈ {top, right, bottom, left}，Ltop = Lbottom = 所在矩形区域的宽，Lleft = Lright = 所在矩形区域的高。如果f & 1，那么所有角半径都乘以f。
浏览器支持
实际中，目前没有任何一款浏览器支持这个属性，只有部分浏览器利用其私有属性支持部分实现：
： -moz-border-radius: &length&{1,4} | inherit-moz-border-radius-bottomleft : &length& | inherit-moz-border-radius-bottomright& : &length& | inherit-moz-border-radius-topleft& : &length& | inherit-moz-border-radius-topright : &length& | inherit
只对每个角设置一个半径，只支持实现四分之一圆角，并不支持椭圆形圆角。
具体每个角的命名规则也和W3C不一致，这个比较讨厌。
Firefox3圆角已经相当圆滑了，Firefox2比较糟糕，好在它即将终结了。
： -webkit-border-radius: &length&{1,2} | inherit-webkit-border-bottom-left-radius : &length&{1,2} | inherit-webkit-border-bottom-right-radius : &length&{1,2} | inherit-webkit-border-top-left-radius& : &length&{1,2} | inherit-webkit-border-top-right-radius : &length&{1,2} | inherit
每个属性有1个或2个值，当有两个值时1个表示水平半径，一个表示垂直半径writing-mode改变也随之而变）。所以，Safari和Chrome中的圆角可以是椭圆角。
webkit的实现方法和
非常一致，和当前的草案最大不同就是简写属性-webkit-border-radius的属性值也只有1个或2个值，意义和前面相同。
Chrome中圆角锯齿比较严重，基本上和Firefox2是同一水平，或许是它的webkit版本较低造成的。
由于webkit出生于khtml，所以把 上面属性中的webkit换成khtml即会得到以khtml为核心的浏览器支持的属性了。
当相邻的角半径之和大于所在矩形区域的大小时，都会直接设置所有的角半径为0，即圆角失效，而不会像Firefox那样同比率缩小。
Opera尚不支持border-radius，虽然 ，但是依旧看不到对其支持的希望。
IE就不用说了，标准的不支持了。从MSDN的 &中可以看出IE8已经铁定不支持了。
最简单的应用就是支持的用圆角，不支持的用方角。比如Wordpress2.7的后台、 的blog和
。基础代码如下：
border-width: 1border-style:-moz-border-radius: 11-khtml-border-radius: 11-webkit-border-radius: 11border-radius: 11
实现请看。
，但是貌似IE8不支持VML了。 就是综合以上解决方案的一个具体应用。说实话这样实现出来的圆角也比较粗糙了，我感觉还不如不要。
像VML一样，Canvas也能实现圆角，切除了IE外，所有的主流浏览器都支持。所以就有了两者结合实现的组件
如果上面的现实太痛苦，而又非要用圆角的话，要么一个像素一个像素去拼装，比如Chunky Borders；要么就老老实实用图片来实现吧，比如
本文链接：　
责任编辑：
◎进入论坛、版块参加讨论，我还想。
蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们，我们将立即删除修改。
说明：输入正确的用户名和密码才能参与评论。如果您不是本站会员，你可以 为本站会员。
注意：文章中的链接、内容等需要修改的错误，请用，以利文档及时修改。
注意：请不要在评论中含与内容无关的广告链接，违者封ID
请您注意：?不良评论请用，以利管理员及时删除。?尊重网上道德，遵守中华人民共和国的各项有关法律法规?承担一切因您的行为而直接或间接导致的民事或刑事法律责任?本站评论管理人员有权保留或删除其管辖评论中的任意内容
?您在本站发表的作品，本站有权在网站内转载或引用 ?参与本评论即表明您已经阅读并接受上述条款
专业书推荐
&1999-. 版权所有还没有任何记录...
css3圆角实现方法（border-radius）
来源：jquery插件
作者： 懒人建站
css3圆角实现方法是（border-radius），css3半圆的画法、css3四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。
css3圆角实现方法是（border-radius）下面对使用border-radius来画出css3正圆、css3半圆、css3四分之一圆等画法探讨测试。
css3圆角浏览器支持情况：IE9及其以上，火狐，谷歌等浏览器。
css3圆角的书写顺序：border-radius:上 右 下 左 例如：border-radius:10px 4px 20px 10
如果四个角的弧度相同可以这样写：border-radius:6 &&
css3圆角border-radius的单位也支持百分比%
使用border-radius实现正圆的方法：border-radius:100%; & &
css3半圆的画法：左边半圆就是高度设为宽度的一半，radius只写下和左即可 如： radius: 0 0 200px 200
#quartercircle{
& width: 200
& height: 100
& background-color: #a72525;
& border-radius: 0 0 200px 200
具体情况大家可以自己动手试试，各种情况都试试看能画出那些类型的半圆来。
css3四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。
#quartercircle {
width: 200
height: 200
background-color: #a72525;
border-radius: 200px 0 0 0;
本文链接：/css3/css3-border-radius.html
css3圆角实现方法（border-radius）由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
(责任编辑：懒人建站)
css3圆角实现方法（border-radius）-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）您所在的位置： &
3.4.1　border-radius属性的语法及参数
3.4.1　border-radius属性的语法及参数
机械工业出版社
《图解CSS3：核心技术与案例实战》第3章CSS3边框，本章主要介绍CSS3新增的边框特性，首先从CSS的border属性着手切入，分别介绍了CSS3新增边框特性，border-color、border-image、border-radius以及box-shadow。详细介绍了每个特性的语法规则，并且结合一些简单的案例，以图解的方式介绍了这些特性的具体使用方法以及在IE下相应的兼容和处理方式。本节为大家介绍border-radius属性的语法及参数。
3.4　CSS3圆角边框属性
在Web页面上圆角效果很常见。圆角给页面增添曲线之美，让页面不那么生硬，但是为了设计圆角效果，Web设计师们要花费更多的时间与精力。
3.4.1　border-radius属性的语法及参数
CSS3中专门针对元素的圆角效果增加了一个圆角属性border-radius。Web设计师不会为Web页面中的圆角效果纠结了。
border-radius:&none&|&&{1,4}[/{1,4}]&?&
border-radius是一种缩写方法。如果反斜杠符号&/&存在，&/&前面的值是设置元素圆角的水平方向半径，&/&后面的值是设置元素圆角的垂直方向的半径；如果没有&/&，则元素圆角的水平和垂直方向的半径值相等。另外四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的，其主要会有以下四种情形出现。
1）border-radius:&length&{1}设置一个值，top-left、top-right 、bottom-right和bottom-left四个值相等，也就是元素四个圆角效果一样。
2）border-radius:&length&{2}设置两个值，top-left等于 bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二值。也就是元素的左上角和右下角取第一个值，右上角和左下角取第二个值。
3）border-radius:&length&{3}设置三个值，第一个值设置top-left，第二个值设置top-right和bottom-left，第三个值设置bottom-right。
4）border-radius:&length&{4}元素四个圆角取不同的值，第一个值设置top-left，第二个值设置top-right，第三个值设置bottom-right，最后一个值设置bottom-left。
border-radius的属性参数非常简单，主要包含两个值。
none：默认值，表示元素没有圆角。
&length&：由浮点数字和单位标识符组成的长度值。不可以是负值。
注意&如果要重置元素没有圆角，取值none并无效果，需要将元素的border-radius取值为0。
border-radius和border属性一样，可以将各个角单独拆分出来。这样border-radius就派生出另外四个子属性，而且它们都是先Y轴再X轴。
border-top-left-radius：&length&/&length&；定义元素左上角圆角。
border-top-right-radius：&length&/&length&；定义元素右上角圆角。
border-bottom-right &radius ：&length&/&length&；定义元素右下角圆角。
border-bottom-left-radius：&length&/&length&；定义元素左下角圆角。
上面四个子属性取值和border-radius是一样的，只不过水平和垂直方向仅一个值，&/&前面的值为水平方向半径，后面的值为垂直方向半径。如果第二个值省略，元素水平和垂直方向半径，其实就是以&&length&&为半径的四分之一圆。如果任意一个值为&0&，这个角就不是圆角。
由于各浏览器厂商对border-radius子属性解析不一致，造成了各浏览器下的border-radius属性的派生子属性写法有所区别。
1）Gecko内核浏览器（Firefox、Flock等）。
-moz-border-radius-topleft:/;&&&&&左上角圆角 &-moz-border-radius-topright:/;&&&&右上角圆角 &-moz-border-radius-bottomright:/;&右下角圆角 &-moz-border-radius-bottomleft:/;&&左下角圆角&
2）Webkit内核浏览器（Chrome、Safari等）。
-webkit-border-top-left-radius：/;&&&左上角圆角 &-webkit-border-top-right-radius：/;&&右上角圆角 &-webkit-border-bottom-right-radius：/;&&&右下角圆角 &-webkit-border-bottom-left-radius：/;&&&&左下角圆角&
3）Presto和Trident内核浏览器（Opera、IE 9+等）。
border-top-left-radius：/;&&&左上角圆角 &border-top-right-radius：/;&&右上角圆角 &border-bottom-right-radius：/;&&&右下角圆角 &border-bottom-left-radius：/;&&&&左下角圆角&
border-radius派生的子属性虽然方便为元素设置指定角的圆角，但为了兼容各浏览器的新老版本写法，不得为样式增加额外的代码。
/*Firefox浏览器*/ &-moz-border-radius-topleft:&/;&&&&&&右上角圆角 &-moz-border-radius-topright:&/;&&&&&右上角圆角 &-moz-border-radius-bottomright:&/;&&右下角圆角 &-moz-border-radius-bottomleft:&/;&&&左下角圆角 &/*Chrome和Safari浏览器*/ &-webkit-border-top-left-radius:&&/;&左上角圆角 &-webkit-border-top-right-radius:&&/;&&&&右上角圆角 &-webkit-border-bottom-right-radius:&/;&&右下角圆角 &-webkit-border-bottom-left-radius:&&/;&&左下角圆角 &/*Opera、IE&9+、W3C标准写法*/ &border-top-left-radius:&/;&&左上角圆角 &border-top-right-radius:&/;&右上角圆角 &border-bottom-right-radius:&/;&&右下角圆角 &border-bottom-left-radius:&/;&&&左下角圆角&
这样给元素设置单个圆角效果是件非常痛苦的事情，而且难以维护，也容易出错。其实给元素设置单个圆角效果，完全可以借助border-radius属性的标准写法，只是需要将其他顶边的圆角半径值设置为0。例如，只要给元素左上角设置圆角效果。
border-radius:&5px&0&0&0;/*左上角设置圆角*/&
喜欢的朋友可以添加我们的微信账号：
51CTO读书频道二维码
51CTO读书频道活动讨论群：【责任编辑： TEL：（010）】&&&&&&
关于&&的更多文章
这是一本介绍如何使用HTML5和JavaScript进行Android游戏开发的书
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
讲师： 0人学习过讲师： 33人学习过讲师： 86人学习过
本书的核心是一个应用实例，它使用Web服务给用户传送
sdn（软件定义网络）是未来网络发展的趋势，它将网络
淘宝的搜索规则一直在变，有的因素权重在增加，有的因
信息安全风险评估理论研究日趋成熟，相关资料比较充分，但有关评估实际工作的参考资料很少。本书以信息安全风险评估实践为基础，
51CTO旗下网站