到底有几种圆角的实现方法？
在web页面中通常会使用多个区块来区分展现不同的信息，这多个区块一般会有一定的间隔，并在视觉上做一些处理引导。而每个独立的区块的边缘就会是视觉设计师考虑比较多的地方。
区块的边缘里，四个角是最难处理的地方，目前用的最多的，就是直角和圆角，欧美站点里，直角给人一种硬朗、商务、犀利和直接的感觉，直角风用的最普遍的就是yahoo.com了:
对于圆角，我想很多做视觉的朋友都会想到Mac、iphone，没错，圆角相对于端正的方角，更有亲和力、圆润、活泼和极度的欲参与感。这个在apple.com上随处可见，i家族的产品上，也到处是它的影子。
近一两年来，web视觉中，圆角用的越来越多，并且慢慢的往上面添加了不同的风格样式，演变除了阴影圆角，半透明圆角等等，为的就是传递上面所提到几种感觉，提升用户浏览站点过程中的美妙体验。好了，啰嗦了这么多，进入正题：如何在web页面上实现圆角？
1.图片圆角
用圆角形状的图片来对四个边角或者某些边角进行遮罩，这种方式用的最多，思路有几种：
1.1 切取需要的边角图片，一般会将其做到sprite上，然后使用使用css定位到需要的某些边角上，而最外围的块元素设置border或者background，这样从整体上看就是一个圆润活泼的圆角框了。
eg1:
上面的小圆圈就是四个边角的sprite，高为8px，宽为8px，待会的例子中将会使用它来做四个圆角。
Tips:You can change the code before run.
1.2 由上面这种方法可以延伸出很多类似的实现方式，例如将顶部的两个圆角跟上边框切到一起，底部的两个圆角和底边框切到一起，两张独立的图片做为上下两个块元素的背景，这里就不再列举了，直接看图样。
eg:
优点：圆角的弧度可以随意定制，而且风格能够多变，视觉效果上也更漂亮。
缺点：需要使用图片来处理，虽然图片不会很大，但增加了一定的工作量，css和结构都相对复杂，在ie6下需要注意一下兼容性。
2.css+xhtml实现的像素圆角
使用css+xhtml实现的方式需要几乎一样的标签结构，但要复杂一点，其实就是顶部或者底部的一个块状元素实现上下边线，且宽度比整个外层元素要小一点，接着就堆砌两到三个块状元素来补缺圆润，且颜色要比边框稍微淡一点，这样看起来就不会太过生硬，直接看例子，说比较费劲。
Tips:You can change the code before run.
css+xhtml像素圆角的做法很久以前就有，但使用的站点不多，有的同学甚至为了做到极致，使用的N多层的标签来做更圆润的圆角，得不偿失，上面的方法仅仅用了8个标签加少量css来实现四个圆角，应该说性价比还是比较高的。
优点：可以很方便的重用，且颜色值可以随时调整，比较轻量和简单，目前我比较喜欢这个方法，兼容性问题少。
缺点：圆角的弧度稍稍有点粗糙，有点点的毛刺，但是通过将边角的颜色淡化后，已经很接近使用图片的效果了。
3.伟大的css3 圆角
使用真正的css圆角可以不用再添加任何多余的标签结构就能实现完美的圆角，这个要得益于css3的伟大创新，使用css3的圆角目前还没有那个浏览器能够很好的原生支持border-radius。
目前支持这一css3特性的有：Safari 3—webkit核心、firefox—Gecko核心、Konquror—kde核心、chrome—webkit核心
他们都使用私有属性来支持css圆角：
firefox：-moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomleft -moz-border-radius-bottomright
Konquror：-khtml-border-radius
chrome，Safari ：-webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius
Tips:You can change the code before run.
优点：兼容性好，视觉效果和图片实现方式没有两样，轻量，成本低。
缺点：目前很那啥的IE的不支持使得这一个好的技术没能铺开。