close

上次在blueidea上看到一個元素圓角的實現方法,但是那個太複雜了。於是就自己寫了一個函數,可以將元素自動圓角。
演示地址:http://longbill.cn/down/sample/roundcorner.htm
不要用在有 padding 值得元素上,最好是在外面套一層。詳情見演示地址。

程序代碼 程序代碼
function RoundCorner(obj,style)
{
/********
網頁元素圓角函數!!
作者: 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;
      }
}


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 kevin0523 的頭像
    kevin0523

    新‧夢想

    kevin0523 發表在 痞客邦 留言(0) 人氣()