上次在blueidea上看到一個元素圓角的實現(xiàn)方法，但是那個太復雜了。于是就自己寫了一個函數(shù)，可以將元素自動圓角。 
演示地址：http://longbill.cn/down/sample/roundcorner.htm 
不要用在有 padding 值得元素上，最好是在外面套一層。詳情見演示地址。 
代碼： 
function RoundCorner(obj,style) 
{ 
/******** 
網(wǎng)頁元素圓角函數(shù)!! 
作者: Longbill 
主頁: www.longbill.cn 
********/ 
       var r = []; 
       var styles = [ 
       {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 (!style || style>styles.length) style = 1; 
       style--; 
       var btop = styles[style].top,bbottom = styles[style].bottom; 
       obj = document.getElementById(obj); 
       if (!obj) return; 
       var HTML = obj.innerHTML; 
       obj.innerHTML = ""; 
       for(var istop=1;istop>=0;istop--) 
       { 
              var topborder = document.createElement("b"); 
              topborder.style.display = "block"; 
              topborder.style.height = "2px"; 
              topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF"; 
              for(var i=0;i<btop.length;i++) 
              { 
                     var b = document.createElement("b"); 
                     if (obj.style.backgroundColor) 
                            b.style.backgroundColor = obj.style.backgroundColor; 
                     else if (obj.className) 
                            b.className = obj.className; 
                     b.style.display = "block"; 
                     b.style.margin = (istop)?btop[i]:bbottom[i]; 
                     b.style.height = "1px"; 
                     b.style.overflow = "hidden"; 
                     b.style.width = "auto"; 
                     topborder.appendChild(b); 
              } 
              obj.appendChild(topborder); 
              if (istop) obj.innerHTML+=HTML; 
       } 
}

最新評論