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

    技术2022-05-11  26

     

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

    最新回复(0)