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

楼主连概念都没有搞清楚吧。圆角矩形和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>

解决方案 »

  1.   

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

  2.   

    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>
      

  3.   

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

  4.   

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

  5.   

    不同的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>