CSS定义DIV圆角边框 - lializ

顺晟科技

2022-09-13 14:15:02

219

用CSS样式，比js好

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

CSS就不会

<html>

<head>

<title>css圆角效果</title>

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFFFFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

</head>

<body>

无图片实现圆角框

</div>

<br>

<br>无图片实现圆角框<br><br>

</div>

</body>

</html>

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

另外一种实现方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<STYLE>BODY {

FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center

}

.round {

DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue

}

</STYLE>

<BODY>

<DIV

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

<DIV

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

<DIV

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

<DIV

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

<DIV

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

<DIV

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

[, 圆角样式 ]);<BR>圆角样式:可选参数,暂时有4种 </DIV></DIV>

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<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;

}

</SCRIPT>

</BODY></HTML>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

body {font-size:12px;}

.round1 { border:1px solid #AFE8E1; background-color:#fff; position:relative;}

.round1 .tl,.round1 .tr,.round1 .bl,.round1 .br { width:5px; height:5px; overflow:hidden; position:absolute; background:url(http://cn.yimg.com/i/ks/060928/bgcorn.gif) no-repeat;}

.round1 .tl { left:-1px; top:-1px; _top:0;}

.round1 .tr { right:-1px; top:-1px; _top:0; background-position:-4px 0;}

.round1 .bl { left:-1px; bottom:-1px; background-position:0 -4px;}

.round1 .br { right:-1px; bottom:-1px; background-position:-4px -4px;}

.ovt ul { margin:0; padding:0; }

.ovt li {background:url(http://cn.yimg.com/i/ks/060928/br.gif) right no-repeat; height:22px; line-height:22px; list-style:none; float:left; color:#088;}

.ovt span { background:url(http://cn.yimg.com/i/ks/060928/bl.gif) left no-repeat; display:block; padding:0 1em 0 .5em;}

-->

</style>

<!--

//-->

</script>

</head>

<body>

</ul>

</div>

<div style="padding:10px;">通过下列链接访问参考资料，可帮助你创建引人注目的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>

</div>

</body>

</html>

上一篇：css3如何实现圆角边框 - 乌云上下一篇：css3：border-radius

网站建设

Css

CSS定义DIV圆角边框 - lializ