接下来，说说它的价值
看过demo的朋友应该知道了我所描述的几大优势：
1. 无论是在横向还是纵向上都保持着无限的扩展性。
2. 没有hack，且不易出现浏览器兼容性问题。
3. 圆角颜色易自定义。
4. 圆角大小可自定义。
5. 圆角模式易自定义。
6. 可以存在于任意背景中。
7. html结构清晰。
接下来我们逐个分析：
1. 无论是在横向还是纵向上都保持着无限的扩展性。
试着修改box的width、content的height，就能看到效果。
2. 没有hack，且不易出现浏览器兼容性问题。
这个大家用各种浏览器试试就知道了，该演示仅在IE6/FF2/OP9下通过测试，但个人觉得多数浏览器应该没什么问题，因为用到的样式都很基础。
3. 圆角颜色易自定义。
大家试着将这段样式复制到已有样式的最后面。
复制内容到剪贴板
代码:
/*---定义边框颜色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
border-color:#2d437b;
}
.box .r1 {
background:#2d437b;
}
/*---定义背景颜色---*/
.box .r2,
.box .r3,
.box .r4,
.box .content {
background:#f3fdff;
}效果如下：
提示：您可以先修改部分代码再运行
4. 圆角大小可自定义。
以同样的方式，将以下代码加入源码中，然后试着将class="box"修改为class="box2"试试。
（也就是说，用户只需要告诉你他需要的是box1还是box2，你就能给他所需要的圆角。）
复制内容到剪贴板
代码:
/*---修改圆角大小---*/
.box2 {
width:500px;
margin:30px auto;
}
.box2 .r1 {
height:1px;
overflow:hidden;
margin:0 2px;
background:#f60;
}
.box2 .r2 {
height:1px;
overflow:hidden;
margin:0 1px;
border-left:1px solid #f60;
border-right:1px solid #f60;
background:#ff0;
}
.box2 .content {
background:#ff0;
border-left:1px solid #f60;
border-right:1px solid #f60;
padding:7px 10px;
zoom:1;
}效果如下：
提示：您可以先修改部分代码再运行
5. 圆角模式易自定义。
同样的方式，大家将以下样式添加进去试试？
复制内容到剪贴板
代码:
/*---修改圆角模式---*/
.box .top .r1,
.box .top .r2,
.box .top .r3,
.box .top .r4 {
margin-right:0;
border-right:1px;
}
.box .bottom .r1,
.box .bottom .r2,
.box .bottom .r3,
.box .bottom .r4 {
margin-left:0;
border-left:1px;
}效果如下：
提示：您可以先修改部分代码再运行
6. 可以存在于任意背景中。
因为是模拟的像素图，所以多余的部分都是全透明的，大家试着修改一下body的background就行了。
7. html结构清晰。
这个纯属个人看法。
[
本帖最后由 14px 于 2007-10-22 18:29 编辑 ]
