纯代码打造小圆角

大概半个月前, 同学发现 Yahoo! 网页上的一些圆角并不需要图片, 而是纯代码实现的.
点击查看 Yahoo! 的应用页面.
其实也很简单, 下面分析一下, 或许以后会有用.

1. 做一个直角的 DIV, 给他画上边框. (以下图片都以左上角为例)

2. 在 DIV 内部画第二个 DIV, 背景色与页面背景颜色相同.

3. 将第二个 DIV 挪到边界上, 使它能与页面背景连接, 这样看上去就像一个缺角的框框.

4. 在第二个 DIV 内画第三个 DIV, 在这里其实就是一点.

5. 将第三个 DIV 挪到右下角的位置, Done.

我在 Yahoo! 截取了这段代码, 改了一下. 下载点击
最终效果如下图所示:

其他样式的圆角同样可以通过这样的方法来实现. 当然, 这个是比较简单的. enjoy...