关于将直角框改成圆角框的问题

hyowner 2008-12-29 12:28:12

我的问题就是我在页面上有很多的方框,这些框是根据JS+DWR动态生成的,现在我需要把这些直角框变成圆角,就是4个角是圆角的框来显示,查了很多资料,都是用CSS来做的,但和我的情况又不太一样,郁闷中,我把代码贴出来希望有大哥能帮我看看:
先贴出下面这个函数:
/*
* function ac
*
* Shorthand function for appendChild
*
* Accepts an arbitrary number of elements as parameters and appends
* the 2nd and later elements to the first element. Returns the first
* object in the list after appends. Useful in chains (see Example)
*
* Example: ac( house, ac(roof, shingles), ac(floor, ac(tiles, grout)))
*/
function ac(){
if (ac.arguments.length > 1){
//alert(ac);
var a = ac.arguments[0];
for (i=1; i <ac.arguments.length; i++){
if (arguments[i])
a.appendChild(ac.arguments[i]);
}
return a;
} else {
return null;
}

}
这个函数,然后再贴出我要调用的地方,下面的地方就是我主页面的框的生成方法:
ac(
//这是整个框的一个DIV
moduleFrame,
//这是我加的圆框的上半圆部分
ac(roundtop,
roundb1,
roundb2,
roundb3,
roundb4),

//这是框的主体内容显示的部分
ac(module,
ac(
header,
closer,
expand,
reload,
editit,
title),
editdiv,
content),

//这是框的底部半圆部分
ac(roundbottom,
roundb4,
roundb3,
roundb2,
roundb1)
);
return moduleFrame;
我的思路就是按这上面的上中下构成一个圆角框,我再把CSS贴出来
/*加圆角边框CSS*/
.module_frame {
margin:0 0 6px 0;
background: #fff;
width: 100%;
height: 100%;
}
.module {
float: left;
width: 100%;
display:block;
padding:0px;
height:100%;
overflow:hidden;
border:0 solid #9B9B9B;
border-bottom:#9B9B9B 1px solid;
border-left:#9B9B9B 1px solid;
border-right:#9B9B9B 1px solid;
background:#fff;
}
.roundtop,.roundbottom{
display:block;
font-size:1px;
width: 100%;
background:transparent;
}

.roundb1,.roundb2,
.roundb3,.roundb4 {
display:block;
overflow:hidden;
}

.roundb1,.roundb2,.roundb3 {
height:1px;
border-left:1px solid #9B9B9B;
border-right:1px solid #9B9B9B;
background:#fff;
}

.roundb1 {margin:0 5px;background:#9B9B9B;}
.roundb2 {margin:0 3px;border-width:0 2px;}
.roundb3 {margin:0 2px;}
.roundb4 {
height:2px;
margin:0 1px;
border-left:1px solid #9B9B9B;
border-right:1px solid #9B9B9B;
background:#fff;
}
这样的,大家看我贴的调用ac()函数的那个地方在中间的那部分是没有问题的,正常显示,然后就是上下部分的圆角部分有问题,就是下面的底部会覆盖上半圆部分,就是我要是按这样写的,结果会只显示底部的半圆框,上面部分的显示就显示不出来,要么就只显示上面的部分圆角框,要么就只显示下面部分的,快被这问题磨死了额,这个问题该怎么解决呢啊???????请高手大哥们帮我看看哦,分不是问题,谢谢了!!!

...全文