用CSS做圆角

圆角效果经常被运用到页面设计上，而前端实现圆角却始终是个不大不小的难题。如想达到大多数浏览器兼容，尤其是对IE的兼容，通常需要用到图片或多个box来模拟，增加冗余代码不说，也确实是个不太简单的事情。

曾经考虑用javascript封装函数，在页面加载时触发事件，自动生成各种各样的box来模拟圆角效果，从开发的角度一劳永逸。但事实往往不尽如人意，这样做当遇到圆角+边框的效果，会有很多麻烦的兼容性问题。

其实衡量后发现要达到圆角效果并不难，只是要兼容IE浏览器会很麻烦。综合考虑仅仅为了IE而增加大量冗余代码来实现圆角这么简单的效果，实在是得不偿失的，因此考虑放弃对IE的兼容。

这样的话CSS3已经有默认属性支持容器的圆角
border-radius: 5px; /*自定义圆角半径*/

只是CSS3目前还没发布，绝大部分浏览器都不支持，但以Firefox为首的标准浏览器已经在自己的内核中加入了对圆角的解析，包括khtml和webkit内核的浏览器也均有自己的专有属性。如不考虑对垃圾IE的兼容，可以用以下CSS代码方便实现圆角，完全兼容firefox内核浏览器以及khtml和webkit内核（例如google chrome, safari等）的浏览器。
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
很可惜目前IE并没有类似的专有属性，IE8的beta2也并没有支持CSS3，但愿IE8的正式版发布后会有所改进。