网页制作网络技术需要大家共同分享,不能闭门造车,下面是bj-dns文章简介:年前发表的《The visual design of Web 2.0》中提到“Rounded everything”,圆角因使人感觉舒适的友好风格而变得无处不在。而W3C早在 2002年的CSS3草案 中就加入了一个叫 border-radius 的属性,通过它可以直接来定义HTML元素的圆角。
的站点:
两年前发表的中提到“Rounded everything”,圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死, 的Nicole在讲演中用的副标题是don’t blame the rounded corners!,从侧面也说明了圆角给实现者带来的困扰:实现麻烦、兼容困难、性能不佳。而W3C早在 中就加入了一个叫 的属性,通过它可以直接来定义HTML元素的圆角。
CSS3的border-radius规范
中其主要信息如下:
浏览器支持
实际中,目前没有任何一款浏览器支持这个属性,只有部分浏览器利用其私有属性支持部分实现:
实际应用
最简单的应用就是支持的用圆角,不支持的用方角。比如Wordpress2.7的后台、 的blog和 。基础代码如下:
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
实现请看。
,但是貌似IE8不支持VML了。 就是综合以上解决方案的一个具体应用。说实话这样实现出来的圆角也比较粗糙了,我感觉还不如不要。
像VML一样,Canvas也能实现圆角,切除了IE外,所有的主流浏览器都支持。所以就有了两者结合实现的组件 。
如果上面的现实太痛苦,而又非要用圆角的话,要么一个像素一个像素去拼装,比如Chunky Borders;要么就老老实实用图片来实现吧,比如 的方式。