可以实现元素圆角的函数~

 

不要用在有 padding 值得元素上，最好是在外面套一层。

<style>
body {text-align:center; color:#333333; font-size:12px;}
.round{background-color:lightblue;width:200px;margin:5px;display:inline;}
</style>
<div style="width:500px;background-color:#e9afdf;margin:5px;" id=title>
 <div style="padding:3px;">
 自动圆角函数<br/>
作者:<a href=http://www.longbill.cn target=_blank>Longbill</a>
 </div>
</div>
<div class=round id=round1 ><div style="padding:3px;">样式1</div></div>
<div class=round id=round2 ><div style="padding:3px;">样式2</div></div><br/>
<div class=round id=round3 ><div style="padding:3px;">样式3</div></div>
<div class=round id=round4 ><div style="padding:3px;">样式4</div></div>
<div style="width:500px;background-color:#e9afdf;margin:5px;" id=a>
 <div style="padding:3px;">
说明:<br/>
RoundCorner("欲圆角的元素ID" [, 圆角样式 ]);<br/>
圆角样式:可选参数,暂时有4种
 </div>
</div>


<script>
RoundCorner("round1",1);
RoundCorner("round2",2);
RoundCorner("round3",3);
RoundCorner("round4",4);
RoundCorner("a",1);
RoundCorner("title",1);

function RoundCorner(oContain,idxStyle)
{
      var r = [];
      var oStyleLst = [
      {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
      {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"]},
      {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
      {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
      ]; //author: longbill.cn
      if (!idxStyle || idxStyle>oStyleLst.length) idxStyle = 1;
      idxStyle--;
      oContain = document.getElementById(oContain);
      if (!oContain) return;
      for (var key in oStyleLst[idxStyle])
      {
            var topborder = document.createElement("div");
            topborder.style.display = "block";
            topborder.style.backgroundColor = (oContain.parentNode.style.backgroundColor)?oContain.parentNode.style.backgroundColor:"#FFFFFF";
            for (var i=0; i<oStyleLst[idxStyle][key].length; i++)
            {
                  var b = document.createElement("div");
                  if (oContain.style.backgroundColor)
                        b.style.backgroundColor = oContain.style.backgroundColor;
                  else if (oContain.className)
                        b.className = oContain.className;
                  b.style.display = "block";
                  b.style.margin = oStyleLst[idxStyle][key][i];
                  b.style.height = "1px";
                  b.style.overflow = "hidden";
                  b.style.width = "auto";
                  topborder.appendChild(b);
            }
            oNode = (key == 'top')?oContain.firstChild:null;
            oContain.insertBefore(topborder, oNode);
      }
} 
</script>