回复必给分:用javascript如何实现圆角的div

deninghe 2006-05-14 06:03:03

To:路过的各位高手

用ajax或者javascript怎样实现把页面的div或者table作圆角的?

我想用ajax或者javascript来实现

其实用css可以实现只不过没有通用性如果有很多个div 那么背景色就不好设置了

如果用javascript的一个函数来实现不同的div id有不同的背景色就好了

还有没有人来顶啊!!!

回复必给分

...全文

279 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhongbx 2007-04-06

打赏
举报

CSS 去看看吧，接分

GDPudding 2006-05-15

打赏
举报

晕，虽然对楼主的无畏精神表示敬佩

不但楼主你也太......

了吧?

deninghe 2006-05-15

打赏
举报

呵呵　谢谢各位了

indexroot 2006-05-15

打赏
举报

UP

<style type="text/css">
div.RoundedCorner{
background: #9BD1FA;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomleft:10px;
}
</style>
</head>
<body>
<div class="RoundedCorner">
test
<br/>圆角矩形，遗憾的是只有Firefox支持</div>

plcnc2003 2006-05-15

打赏
举报

对啊样式表可以做得到,"不同的div id有不同的背景色就好了",你要对样式表加深一下了解啊

捏造的信仰 2006-05-15

打赏
举报

不同的DIV不同的颜色啊，我根据BlueDestiny(May Be I am Really never online.) 提供的代码改出来一个，页面如下：

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="../TimeoutHandler/TimeoutHandler.js"></script>
<script type="text/javascript" src="../DebugPanel/DebugPanel.js"></script>
<script type="text/javascript">

function turnToRoundCorner(id, bgColor, conerColor) {

var roundheader = "<div style=\"display:block;background-color:";
roundheader += conerColor + ";\"><div style=\"display:block;height:1px;overflow:hidden;background-color:"
roundheader += bgColor + ";margin:0 5px;\"></div><div style=\"display:block;height:1px;overflow:hidden;background-color:"
roundheader += bgColor + ";margin:0 3px;\"></div><div style=\"display:block;height:1px;overflow:hidden;background-color:"
roundheader += bgColor + ";margin:0 2px;\"></div><div style=\"display:block;height:1px;overflow:hidden;background-color:"
roundheader += bgColor + ";margin:0 1px;height:2px;\"></div></div>";
var roundfooter = "<br/><div style=\"display:block;background:";
roundfooter += conerColor + ";\"><div style\"display:block;height:1px;overflow:hidden;background-color:"
roundfooter += bgColor + ";margin:0 1px;height:2px;\"></div><div style=\"display:block;height:1px;overflow:hidden;background-color:"
roundfooter += bgColor + ";margin:0 2px;\"></div><div style=\"display:block;height:1px;overflow:hidden;background-color:"
roundfooter += bgColor + ";margin:0 3px;\"></div><div style=\"display:block;height:1px;overflow:hidden;background-color:"
roundfooter += bgColor + ";margin:0 5px;\"></div></div>";

var elem = document.getElementById(id);
elem.innerHTML = roundheader + elem.innerHTML + roundfooter;
elem.style.backgroundColor = bgColor;
}
</script>
</head>

<body onload="turnToRoundCorner('div1', '#9BD1FA', '#FFFFFF')">
<div id="div1">
<br/>无图片实现圆角框<br/>
</div>
</body>
</html>

pli0825 2006-05-15

打赏
举报

呵呵。这个问题都折腾死我了。
我有两段不同的实现方式。
都不理想。最终还是用背景图片来实现的

捏造的信仰 2006-05-15

打赏
举报

好麻烦哦。似乎都是这种方法。

laochake 2006-05-15

打赏
举报

<html>
<head>
<title>RoundedBoard</title>
<style>

.RoundedBoard .b1 { HEIGHT: 1px; DISPLAY: block; OVERFLOW: hidden; BACKGROUND-COLOR:#ccc;}
.RoundedBoard .b2 { HEIGHT: 1px; DISPLAY: block; OVERFLOW: hidden }
.RoundedBoard .b3 { HEIGHT: 1px; DISPLAY: block; OVERFLOW: hidden }
.RoundedBoard .b4 { HEIGHT: 2px; DISPLAY: block; OVERFLOW: hidden }

.RoundedBoard .b2 , .b3 , .b4{ BORDER: #ccc 0px solid;}

.RoundedBoard .b1 { MARGIN: 0px 4px;}
.RoundedBoard .b2 { MARGIN: 0px 2px; BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 2px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 2px }
.RoundedBoard .b3 { MARGIN: 0px 1px; BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 1px }
.RoundedBoard .b4 { MARGIN: 0px 0px; BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 1px }

.RoundedBoard .boxcontent {
DISPLAY: block;
BORDER-RIGHT: #ccc 1px solid;
BORDER-LEFT: #ccc 1px solid;
padding:0px 5px;
}

</style>
</head>
<body>

<DIV class="RoundedBoard" style="width:300px">
<B class=b1></B>
<B class=b2></B>
<B class=b3></B>
<B class=b4></B>

<div class=boxcontent>
asdfas asfd asfd asfd asdf asdf asf asdf asdf as asdf sasdf asdf <br>asdf<br>asdf<br>asdf<br>asdf<br>
</div>

<B class=b4></B>
<B class=b3></B>
<B class=b2></B>
<B class=b1></B>
</DIV>

</body>
</html>

BlueDestiny 2006-05-15

打赏
举报

-moz-border-radius实际上应该是对css3的支持。

BlueDestiny 2006-05-14

打赏
举报

楼主连概念都没有搞清楚吧。

圆角矩形和ajax有关吗？

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
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 class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>