html定义圆角,CSS3的border-radius属性定义HTML元素的圆角

网页制作网络技术需要大家共同分享，不能闭门造车，下面是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；要么就老老实实用图片来实现吧，比如 的方式。