7种css圆角方案
作者：kun10 发布时间：December 4, 2010 分类：CSS
看了北京兰梦同学的项目总结，突然觉得之前的项目中的圆角用的很悲催，
于是总结一下吧。
我列了7种圆角方案
多背景
对于一个盒子里面有多个元素用于存放圆角的图形,具体的实现形式比较自由。
滑动门
用一张背景图片+两个嵌套的标签来实现（具体的实现也比较自由）
废弃标签的绝对定位
常用的是s、b标签，往往局限于1px半径的圆角
<div class="s-abs">
<s class="tl"></s>
<s class="tr"></s>
<div id="s-abs">
</div>
<s class="bl"></s>
<s class="br"></s>
</div>
废弃标签+背景图定义两层圆角
百度知道的方案，分三层盒子
- 最外层用来存放圆角和里面的盒子
- 第二层盒子是容器的外层边框，不要设定此元素的大小，其高度由内部元素决定
- 第三层盒子是容器的内边框的展示，可以设定高度，或者其高度由内部元素决定
- 四个圆角使用一个圆圈形空心背景，设定不同的background-position，上边角dom位置放在第二层盒子的上面，下边角dom位置放在第二层盒子的下面
<div class="b-border">
<b class="tl"></b>
<b class="tr"></b>
<div id="b-border">
<div id="b-border-inner">
</div>
</div>
<b class="bl"></b>
<b class="br"></b>
</div>
纯div圆角实现的方式
没有css图片的参与
<div id="div-corner-outer">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod4"></div>
<div id="div-corner"></div>
<div class="rod4"></div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod1"></div>
</div>
相对+绝对定位实现1px圆角
外层的div使用相对定位，里面的div使用绝对定位，通过宽度的不一，实现1px的圆角
<div id="border-relative">
<div id="border-abs-inner"></div>
</div>
牺牲IE 6 7 吧
使用border-radius相关属性
不多说，demo奉上~~~
欢迎大家提供更多方案。
