您的位置: 首页 > 技术文档 > 网页制作 > border-radius与圆角
仿Apple滑动条(拖动)产品展示效果 回到列表 如何走出JavaScript初学困境
 border-radius与圆角

作者:秦歌 时间: 2008-12-30 文档类型:原创 来自:蓝色理想

秦歌(YanKaven) 的站点:http://dancewithnet.com/

两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”,圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死,YAHOO Performance Research Engneer Team 的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!,从侧面也说明了圆角给实现者带来的困扰:实现麻烦、兼容困难、性能不佳。而W3C早在 2002年的CSS3草案 中就加入了一个叫 border-radius 的属性,通过它可以直接来定义HTML元素的圆角。

CSS3的border-radius规范

最新草案 中其主要信息如下:

  1. 属性:
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-right-radius
    border-bottom-right-radius
    值:<length> <length>?。它们分别是定义角形状的四分之一椭圆的两个半径。如图:
    1. 第一个值是水平半径。
    2. 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
    3. 如果任意一个值为0,则这个角是矩形,不会是圆的。
    4. 值不允许是负值。
  2. 属性:border-radius。它是上面四个属性值的简写。
    值:<length>{1,4} [ / <length>{1,4} ]?
    1. 如果斜线前后的值都存在,那么斜线前的值设置水平半径,且斜线后的值设置垂直半径。如果没有斜线,则水平半径和垂直半径相等。
    2. 四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略,那么它等于top-right。如果bottom-right省略,那么它等于top-left。如果top-right省略,那么它等于top-left。
  3. 应用范围:所有的元素,除了table的样式属性border-collapse是collapse时
  4. 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时,内边半径是0。所以内外边曲线的圆心并不一定是一致的。
  5. border-radius也会导致该元素的背景也是圆的,即使border是none。如果background-clip是padding-box,则背景(background)会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
  6. 所有的边框样式(solid、dotted、inset等)都遵照角的曲线。如果设置了border-image,则曲线以外的部分会被裁剪掉。
  7. 如果角的两个相邻边有不同的宽度,那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
  8. 两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如,两条边宽度相同,这个点就是一个45°的角上,如果一条边是另外一条边的两倍,那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
  9. 角不允许相互重叠,所以当相邻两个角半径的和大于所在矩形区域的大小时,用户代理(浏览器)比如缩小一个或多个角半径。运算法则如下:f = min(Li/Si),i ∈ {top, right, bottom, left},Ltop = Lbottom = 所在矩形区域的宽,Lleft = Lright = 所在矩形区域的高。如果f < 1,那么所有角半径都乘以f。

浏览器支持

实际中,目前没有任何一款浏览器支持这个属性,只有部分浏览器利用其私有属性支持部分实现:

  1. Firefox对border-radius的支持
    -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
    1. 只对每个角设置一个半径,只支持实现四分之一圆角,并不支持椭圆形圆角。
    2. 具体每个角的命名规则也和W3C不一致,这个比较讨厌。
    3. Firefox3圆角已经相当圆滑了,Firefox2比较糟糕,好在它即将终结了。
  2. Safari和Chrome对border-radius的支持
    -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. 每个属性有1个或2个值,当有两个值时1个表示水平半径,一个表示垂直半径writing-mode改变也随之而变)。所以,Safari和Chrome中的圆角可以是椭圆角。
    2. webkit的实现方法和 W3C的CSS3草案2005年版本 非常一致,和当前的草案最大不同就是简写属性-webkit-border-radius的属性值也只有1个或2个值,意义和前面相同。
    3. Chrome中圆角锯齿比较严重,基本上和Firefox2是同一水平,或许是它的webkit版本较低造成的。
    4. 由于webkit出生于khtml,所以把 上面属性中的webkit换成khtml即会得到以khtml为核心的浏览器支持的属性了。
    5. 当相邻的角半径之和大于所在矩形区域的大小时,都会直接设置所有的角半径为0,即圆角失效,而不会像Firefox那样同比率缩小。
  3. Opera尚不支持border-radius,虽然 Opera10 alpha拥有众多的CSS3改进,但是依旧看不到对其支持的希望。
  4. IE就不用说了,标准的不支持了。从MSDN的 CSS Compatibility and Internet Explorer 中可以看出IE8已经铁定不支持了。

实际应用

最简单的应用就是支持的用圆角,不支持的用方角。比如Wordpress2.7的后台、雅虎口碑UED 的blog和 今天你带伞了吗? 。基础代码如下:

border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;

实现请看演示实例

利用VML可以实现从IE5-7的圆角 ,但是貌似IE8不支持VML了。组件DD_roundies 就是综合以上解决方案的一个具体应用。说实话这样实现出来的圆角也比较粗糙了,我感觉还不如不要。

像VML一样,Canvas也能实现圆角,切除了IE外,所有的主流浏览器都支持。所以就有了两者结合实现的组件 Cornerz

如果上面的现实太痛苦,而又非要用圆角的话,要么一个像素一个像素去拼装,比如Chunky Borders;要么就老老实实用图片来实现吧,比如 CSS Mojo 的方式。

本文链接:http://www.blueidea.com/tech/web/2008/6355.asp 

出处:蓝色理想
责任编辑:moby

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
网站重构到底是什么
标记语言——学习资源
标记语言——为body指定样式
理解"渐进增强"
Css Reset(复位)整理
作者文章 更多作者文章
连续字符自动换行的解决方案
JavaScript的陷阱
关于基于字体大小(em)的设计
Javascript的匿名函数
Firefox2中输入框丢失光标bug
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2