以下直接给出代码:
第一种: <Html> <head> <style> #a{ border-left:1px #333 solid; border-right:1px #333 solid; width:300px; height:500px; } .b{ height:1px; overflow:hidden; border-left:1px #333 solid; border-right:1px #333 solid; } </style> </head> <body> <div> <div class="b" style="margin-left:3px;width:294px;background:#333"></div> <div class="b" style="margin-left:2px;width:296px;"></div> <div class="b" style="margin-left:1px;width:298px;"></div> <div id="a"> </div> </div> </body> </Html> 第二种: <html> <head> <title>css圆角效果</title> <meta http-equiv="content-type" c> <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> 第三种: <style> .divfloat { margin:0 0 10px 0; background: transparent; } .roundtop,.roundbottom{ display:block; font-size:1px; width: 100%; background:transparent; } .roundb1,.roundb2, .roundb3,.roundb4 { display:block; overflow:hidden; } .roundb1,.roundb2,.roundb3 { height:1px; border-left:1px solid #9B9B9B; border-right:1px solid #9B9B9B; background:#F3F3F3; } .roundb1 {margin:0 5px;background:#9B9B9B;} .roundb2 {margin:0 3px;border-width:0 2px;} .roundb3 {margin:0 2px;} .roundb4 { height:2px; margin:0 1px; border-left:1px solid #9B9B9B; border-right:1px solid #9B9B9B; background:#F3F3F3; } .roundboxcontent { display:block; padding:5px; height:100%; overflow:hidden; border:0 solid #9B9B9B; border-width:0 1px; background:#F3F3F3; } </style> <div class="divfloat"> <b class="roundtop"> <b class="roundb1"></b> <b class="roundb2"></b> <b class="roundb3"></b> <b class="roundb4"></b> </b> <div class="roundboxcontent"> <div class="sidebarwrap"> 这是圆角div内容部分... </div> </div> <b class="roundbottom"> <b class="roundb4"></b> <b class="roundb3"></b> <b class="roundb2"></b> <b class="roundb1"></b> </b> </div> |