上次在blueidea上看到一个元素圆角的实现方法，但是那个太复杂了。于是就自己写了一个函数，可以将元素自动圆角。
演示地址：http://longbill.cn/down/sample/roundcorner.htm
不要用在有padding值得元素上，最好是在外面套一层。详情见演示地址。
代码：
functionRoundCorner(obj,style)
{
/********
网页元素圆角函数!!
作者:Longbill
主页:www.longbill.cn
********/
varr=[];
varstyles=[
{top:["05px","03px","02px","01px","01px"],bottom:["01px","01px","02px","03px","05px"]},
{top:["05px","03px","02px","01px","01px"],bottom:["0px","0px","0px","0px","0px"]},
{top:["0005px","0003px","0002px","0001px","0001px"],bottom:["0100px","0100px","0200px","0300px","0500px"]},
{top:["0500px","0300px","0200px","0100px","0100px"],bottom:["0001px","0001px","0002px","0003px","0005px"]}
];//author:longbill.cn
if(!style||style>styles.length)style=1;
style--;
varbtop=styles[style].top,bbottom=styles[style].bottom;
obj=document.getElementById(obj);
if(!obj)return;
varHTML=obj.innerHTML;
obj.innerHTML="";
for(varistop=1;istop>=0;istop--)
{
vartopborder=document.createElement("b");
topborder.style.display="block";
topborder.style.height="2px";
topborder.style.backgroundColor=(obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";
for(vari=0;i<btop.length;i++)
{
varb=document.createElement("b");
if(obj.style.backgroundColor)
b.style.backgroundColor=obj.style.backgroundColor;
elseif(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;
}
}
【代码精简的可以实现元素圆角的js函数】相关文章：