内容大体是从网上找过来的，感觉那位哥们说的对，css还是比较靠谱的，当然有些高玩搞出来的东西本地
没有运行起来。
把自己的应用贴出来同大家分享
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>Div with fillet set and Tab change</title>
<style type="text/css">
/* div with fillet setting style*/
b.rtop, b.rbottom{
display:block;
background: white; /* set this color as same as bgcolor*/
}
b.rtop b, b.rbottom b{
display:block;
height: 1px;
overflow: hidden; /* the soul to solve this problem*/
background:#6DA6D9
} b.rbottom b.r1{
margin: 0 5px
}
b.rbottom b.r2{
margin: 0 3px
}
b.rbottom b.r3{
margin: 0 2px
}
b.rbottom b.r4{
margin: 0 1px;
height: 2px
} b.rtop b.r1{
margin: 0 5 0 0px
}
b.rtop b.r2{
margin: 0 3 0 0px
}
b.rtop b.r3{
margin: 0 2 0 0px
}
b.rtop b.r4{
margin: 0 1 0 0px;
height: 2px
} </style>
<script type="text/javascript">
// tab change
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var con=document.getElementById("con_"+name+"_"+i);
con.style.display=i==cursel?"block":"none";
} // back ground color
var bgcolor;
if(cursel==1){
bgcolor="#6DA6D9";
} else if(cursel==2){
bgcolor="#FF7D93";
} else if(cursel==3){
bgcolor="#8FC26C";
} else if(cursel==4){
bgcolor="#D2A000";
}
document.getElementById("contentscroll").style.background=bgcolor;
document.getElementById("r1top").style.background=bgcolor;
document.getElementById("r2top").style.background=bgcolor;
document.getElementById("r3top").style.background=bgcolor;
document.getElementById("r4top").style.background=bgcolor;
document.getElementById("r1buttom").style.background=bgcolor;
document.getElementById("r2buttom").style.background=bgcolor;
document.getElementById("r3buttom").style.background=bgcolor;
document.getElementById("r4buttom").style.background=bgcolor; // fillet set
if(cursel!=1){
document.getElementById("r1top").style.margin="0 5px";
document.getElementById("r2top").style.margin="0 3px";
document.getElementById("r3top").style.margin="0 2px";
document.getElementById("r4top").style.margin="0 1px";
} else {
document.getElementById("r1top").style.margin="0 5 0 0px";
document.getElementById("r2top").style.margin="0 3 0 0px";
document.getElementById("r3top").style.margin="0 2 0 0px";
document.getElementById("r4top").style.margin="0 1 0 0px";
} } </script>
</head> <body>
<div class="Menubox">
<span id="tab1" style="background: #6DA6D9; cursor: pointer;" onclick="setTab('tab',1,4)" >tab1</span>
<span id="tab2" style="background: #FF7D93; cursor: pointer;" onclick="setTab('tab',2,4)" >tab2</span>
<span id="tab3" style="background: #8FC26C; cursor: pointer;" onclick="setTab('tab',3,4)" >tab3</span>
<span id="tab4" style="background: #D2A000; cursor: pointer;" onclick="setTab('tab',4,4)" >tab4</span>
</div>
<div id="ContentBox" style="width: 800px;" >
<b class="rtop">
<b id="r1top" class="r1"></b>
<b id="r2top" class="r2"></b>
<b id="r3top" class="r3"></b>
<b id="r4top" class="r4"></b>
</b>
<div id="contentscroll" style="overflow-y: auto; height: 400px; width: 800px; border-color: white; background-color: #6DA6D9;">
<!-- tab block 1 -->
<div id="con_tab_1" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px;background-color: #6DA6D9;">
<h3>tab block 1</h3>
</div>
<!-- tab block 2 -->
<div id="con_tab_2" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px; background-color: #FF7D93; display:none;">
<h3>tab block 2</h3>
</div>
<!-- tab block 3 -->
<div id="con_tab_3" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px; background-color: #8FC26C; display:none;">
<h3>tab block 3</h3>
</div>
<!-- tab block 4 -->
<div id="con_tab_4" style="margin: 0 20px; border-style: solid; border-color: #33339A; border-width: 0px; background-color: #D2A000; display:none;">
<h3>tab block 4</h3>
</div>
</div>
<b class="rbottom">
<b id="r4buttom" class="r4"></b>
<b id="r3buttom" class="r3"></b>
<b id="r2buttom" class="r2"></b>
<b id="r1buttom" class="r1"></b>
</b>
</div>
</body>
</html>