CSS圆角背景

CSS圆角背景
通过改变层叠元素的margin值实现圆角效果.

也就是下面例子中r_a,r_b,r_c,r_d 距上层元素左右的间距逐渐变大或缩小来实现圆角

css部分

.r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上角和左下右下角的容器*/
.r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四个圆角*/
.r_a, .r_b, .r_c{height:1px}
.r_b, .r_c, .r_d{background:#cf6}
.r_a {margin:0 5px}
.r_b {margin:0 3px; border-width:0 2px}
.r_c {margin:0 2px}
.r_d {height:2px; margin:0 1px}

html部分

.....内容容器.....