1. 把一个圆切成四等份,每一份用相对定位放在盒子的四个角上,盒子用border属性,见过我的一个朋友这样写。(宽度和高度都能自适应)
2.把盒子的上下两个边(包括弧线)切下来,按照正常的文档流放在头和尾,中间用border-left和border-right 。(宽度不能自适应)
3.滑动门的做法,左上圆角切下来,保持一个足够长的宽度,右上角只要把弧线切下来就可以,这也是现在淘宝首页的做法,代码如下:
<b class="h">
<b></b>
</b>
第一个b表签放长条的背景,第二个b放右上圆角,只要float:right叠在长条上就能形成上边的两个圆角,同理,下边两个圆角也是这么做,中间当然用border-left和border-right (宽度和高度都能自适应)
你可以用css3的多层背景,把4个圆角图片放到上下左右四个地方,缺点是低版本ie不鸟。或者嵌套四层div,div宽高都设为一样,每个div上放一个圆角背景:
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>