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