你的位置: Kiyo'Space首页 JavaScript/Jscript 阅读文章 欢迎留下您的足迹

可以实现元素圆角的函数

[ JavaScript/Jscript ] 分享

Longbill 's Blog上看到这个函数,圆角问题到又一种解决方式。
演示地址:http://longbill.cn/down/sample/roundcorner.htm
不要用在有 padding 值得元素上,最好是在外面套一层。

以下是引用片段:

function RoundCorner(obj,style)
{
/************
网页元素圆角函数!!
作者: Longbill
主页: www.longbill.cn
obj:对应的元素ID,style有1|2|3可选
************/
      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;
      }
}
From:http://www.ansion.net/article.asp?id=36

欢迎在此留下您的脚步






评论内容 (*必填):
(Ctrl + Enter 快速提交)