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

 

不要用在有 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 >