지난번에 blueidea에서 요소의 둥근 모서리를 구현하는 방법을 본 적이 있는데 너무 복잡했습니다. 그래서 요소의 모서리를 자동으로 둥글게 하는 함수를 직접 작성했습니다.
데모 주소: http://longbill.cn/down/sample/roundcorner.htm
padding 값이 있는 요소에는 사용하지 말고 외부에 레이어를 두는 것이 가장 좋습니다. 자세한 내용은 데모 주소를 참조하세요.
代码:
함수 RoundCorner(obj,style)
{
/********
웹페이지 요소에 대한 라운드 코너 기능!!
저자: Longbill
홈페이지: www.longbill.cn
******/
var r = [];
var 스타일 = [
{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"], 하단:["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"]}
]; //작성자: longbill.cn
if (!style || style>styles.length) style = 1;
스타일--;
var btop = styles[style].top,bbottom = styles[style].bottom;
obj = document.getElementById(obj);
(!obj) 반환인 경우;
var HTML = obj.innerHTML;
obj.innerHTML = "";
for(var istop=1;istop>=0;istop--)
{
var topborder = document.createElement("b");
topborder.style.display = "차단";
topborder.style.height = "2px";
topborder.style.BackgroundColor = (obj.parentNode.style.BackgroundColor)?obj.parentNode.style.BackgroundColor:"#FFFFFF";
for(var i=0;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 = "차단";
b.style.margin = (istop)?btop[i]:bbottom[i];
b.style.height = "1px";
b.style.overflow = "숨김";
b.style.width = "자동";
topborder.appendChild(b);
}
obj.appendChild(topborder);
if (istop) obj.innerHTML =HTML;
}
}