玉楼春

今天Leavic提到他喜欢CSS设计的圆角，并且是不使用图片的那种，我答应找点资料来。以前知道一点这方面的东西，但没有钻研过，今天倒是有点兴致去找找看个究竟。

很快找到了不下几打的方法，真是各路英雄大显神通。

一般来说，基于CSS的圆角技术分为带图片和不带图片两大类。在这当中，又有使用JavaScript的和不使用JavaScript的之分。所以也是各有千秋，互有利弊。还有就是，处理出来的圆角有的是有锯齿的，甚至还有人就利用锯齿来做圆角，于是就有人挑战要做成无锯齿的圆角。总之，新技术在不断出现，新战友挑战老战友，仅仅这个CSS圆角技术就够热闹了。

使用图片的圆角一般结构相对简单，而不使用图片的则经常是层层相套的div。在页面使用JavaScript有时候也不是那么讨人喜欢。所以，我希望能找到一个不用图片，不用JavaScript，并且结构简单的方法，如果可能的话，消除锯齿最好(废话!)。

这就不是件容易的事了。不过我还是找到了：就是 Spiffy Corners ！它符合我的所有条件：纯CSS，没有JavaScript，结构紧凑简洁，没有锯齿，当然也不用图片。最好玩的是，作者把这个技术单独做成一个网站。

下面是结构和CSS，也就是这个页面。你在他的网站可以随意改动颜色做尝试。

应该算是满意了，可我还在继续找。很偶然的，我找到了Christian 在三天前发表的“CSS圆角大集合”，之前我找到的有大半在这里面，也有的没被列在里面。这张表列出了目前主要的圆角技术名称，分别用了几张图片，是否有用JavaScript，是固定的还是浮动的等项比较。非常一目了然，一眼你就知道哪种是你需要的了。要是我早点看到这张表就不会花几个小时到处查了，所以这张表是我查找的最终结果。

当然，Spiffy Corners 也是在其中的。你会看到，表的最下方，还有一个和 Spiffy Corners 同样参数的圆角方案是来自 CSSplay 的 Snazzy Borders。在源文件下你会看得很清楚，我不再写出来。

Christian 的这张大集合还会不断更新。希望从中你能找到自己喜欢的圆角。

补充：
对于FF可以用-moz-border-radius: 5px;实现。