CSS定义DIV圆角边框_html/css_WEB-ITnose

有的浏览器会禁止执行脚本，那样就无效了

CSS就不会

无图片实现圆角框

无图片实现圆角框

=================================================================

另外一种实现方式

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数
作者

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:
RoundCorner("欲圆角的元素ID"

[, 圆角样式 ]);
圆角样式:可选参数,暂时有4种

RoundCorner("round1",1);

RoundCorner("round2",2);

RoundCorner("round3",3);

RoundCorner("round4",4);

RoundCorner("a",1);

RoundCorner("title",1);

function RoundCorner(obj,style)

{ 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

{

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;

}

}

=================================================================

//-->

知识

通过下列链接访问参考资料，可帮助你创建引人注目的 Web 页面。
动态 HTML (DHTML) 对象模型参考