圆角整理合集　——By mytharcher　alpha 0.3 [2007-11-13]

使用说明

1. 点击顶部选项卡，选择圆角实现方式类型，并在其中找到你需要的；
2. 在命名空间里填写自己需要的css层级关系。如，整个box包含在id=aa的容器里则填写“#aa ”(注意后面有个空格作为css的连接符)；如要让box的id=aa，则填写“#aa”(没有空格)；或者其他命名空间方式，如“.class”等；也可以不填；
3. 上一步完成后点击获取代码，再下面的文本域里则会出现圆角的代码，将其中的图片等参数换成自己的既可；
4. 复制文本域里的代码，粘贴到你自己的页面代码里即可；

实现方式

1. 象素绘制绘制方式
2. 内容容器利用方式
3. 十字分割法
4. 绝对定位实现方式
5. 浮动定位实现方式
6. 表格九宫格

总结：

　　简单分析可知，每使用一个圆角，必然要用一个标签来控制，除非是内容的容器足够多，刚好能满足布局需要，否则任何一种实现圆角的方式都要增加额外的标签。在支持css3.0的浏览器普及之前，我们UTer对于圆角仍然是很郁闷的。而圆角的设计实现不仅加大了开发成本，也必然要增大服务端开销。

　　在合适的地方使用合适的方法是非常重要的，尽量减少不必要的额外标签。这里还是要推荐一下内容容器利用的方法，因为这样可以最大限度的保证文档的语义性。除非遇到非常复杂的情况，如线框+阴影+渐变色……等，不建议使用表格来实现。

(象素类型忽略)
按通用性排序：表格 ＞ float = absolute ＞ 十字 ＞ 内容
按语义性排序：内容 ＞ absolute ＞= 十字 ＞ float = 表格
按css代码量排序：float ＞ absolute ＞= 表格 ＞ 十字 ＞ 内容
按html复杂度排序：float ＞ 表格 ＞ absolute ＞= 十字 ＞ 内容
按可简化程度排序：absolute ＞= float = 十字 ＞= 表格 ＞ 内容

1. 1px横线绘制方式

描述：用一象素的容器填充背景色或者使用一边边框来完成绘制1px圆角。
优点：
　　实现简单；
缺点：
　　要增加额外的非结构容器；
　　文档缺乏语义性；

1px带缺口的圆角(1)明主的1px容器方法

content一象素缺口圆角

通过使用两个div.sup在div.cnt的上下，各画出1px的缺口边框

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

1px不带缺口的圆角(1)明主的容器画线方法

content一象素无缺口圆角

通过使用两个div.sup在div.cnt的上下，各画出1px的无缺口边框

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

1px不带缺口的圆角(2)四个边脚方法

content一象素无缺口圆角

使用4个sup和sub作为边脚，通过background和border画出圆角

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

2px带缺口的圆角(1)依然是明主的边框容器画法

content两象素无缺口圆角

通过使用两个div.sup在div.cnt的上下，各画出1px的带缺口边框

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

2px带缺口的圆角(2)四个边脚绝对定位方法

content两象素无缺口圆角

使用4个sup和sub作为边脚，通过background和border画出圆角

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

2. 内容容器利用方式

描述：只设置外层的左右边框，使内层元素高度等于外层的，然后向上relative top-1px。
优点：
　　实现简单；
　　文档语义化好；
　　不需要额外非结构容器；
缺点：
　　只支持向上的圆角；
　　要支持向下的必须设置固定高度，且IE6不支持；

1px带缺口的上圆角(2)内容反向relative 1px方法

content一象素缺口上圆角

如果只有上边需要圆角的话可以这样做

对div.cnt使用relative，top设置-1px

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

3. 十字切分法（包括表格）

描述：用4个容器float排布成“田”字形，右下为内容区，每个容器用背景图相对位置实现；
优点：
　　结构较少；
　　控制方便；
缺点：
　　只能作为色块类型的圆角使用；
　　文档语义性差；
　　背景图必须按一定规律才能合并成一个文件；

图片圆角色块 十字分割实现

图片圆角色块

先用两个容器分割为上下两部分，再在每个部分里增加一个容器，则下方增加容器作为内容容器，最后对各个容器相应位置放上背景图片

不能作为线框应用

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

4. relative+absolute四个圆角容器实现

描述：主盒子设置relative，内部增加四个absolute圆角结构，并设置其各自的相对位置，通过填充背景图片或者1-2象素绘制实现。
优点：
　　文档相对语义化；
　　控制灵活；
缺点：
　　IE6会有主盒子宽高为奇数时右底边线多出1px的bug(可通过固定宽高/增加容器的方法解决)；
　　线框中复杂边框（如阴影）需要增加额外容器；
　　css代码较多；

不定高色块 absolute四个边脚实现

图片圆角色块

使用4个sup和sub作为边脚，通过background-image布置圆角

但是在IE6下有父容器宽度或高度为奇数时的bug

底部或右侧会多出1px

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

定高色块 absolute两个边脚实现

24px定高圆角色块，两个absolute的sup用background-image布置圆角

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

不定高线框 absolute四个边脚实现

图片圆角色块

使用4个sup和sub作为边脚，通过background-image布置圆角

但是在IE6下有父容器宽度或高度为奇数时的bug

底部或右侧会多出1px

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

5. float 4个圆角容器实现

描述：把盒子内再分为3个结构，hd，bd和ft，hd和ft里各放两个圆角容器，通过float布置位置，再结合hd和ft布置背景图片等实现。
优点：
　　在各个浏览器下均无bug；
　　能适应各种情况；
　　如果是固定高度只需两个额外容器，比较方便；
缺点：
　　实现方式复杂；
　　额外容器较多；
　　文档语义性差；
　　如要做线框类型的还要再增加其他容器；
　　css代码较多；

定高色块 float两个边脚实现

24px定高圆角色块，两个float的sup用background-image布置圆角

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

不定高色块 float四个边脚实现

图片圆角色块

使用4个sup和sub作为边脚，通过background-image布置圆角

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码

6. 九宫格表格布局实现

描述：布局一个3x3的九宫格，8个边角布置圆角相关的背景图。
优点：
　　在各个浏览器下均无bug；
　　能适应各种情况；
　　模式固定，便于学习，容易执行；
　　只能用图片作为边框，不能简化为css的border；
缺点：
　　容器结构复杂；
　　基本没有文档语义性；

九宫格表格布局实现

	用表格布置一个九宫格，周为的8个单元格作为补充边脚，以放置圆角相关的背景图片

命名空间 ([#id]|[#id ]|[.class ]|[#id .class ])... 获取代码