学步园

先有两种方法：

　　一、自己做　　　

     <style type="text/css">  
.b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}   
.b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}   
.b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}
.b4 {height: 1px; font-size: 1px; width:100%; overflow: hidden; display: block; background: #B2D0EA; clear:both;}   
  
.bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}   
.bt {background: #EDF7FF;margin:0 2px;padding:5px;}   
.bb {background: #FFFFFF;margin:0 2px;padding:5px;}   
   
/**另一种颜色*/   
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/   
.bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/   
.bb3{background: #E7F9E3;}/*标题背景颜色*/   
  </style> 





 <b class="b1"></b><b class="b2"></b><b class="b3"></b>  
 <div class="bc">  
  <div class="bt ">标题</div>  
    <b class="b4"></b>
    <div class="bb">  
    圆角三边 这里是内容   
   </div>  
  </div>  
  <b class="b3"></b><b class="b2"></b><b class="b1"></b>  <br />
  
  <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>  
  <div class="bc bb2">  
   <div class="bt bb3">另一种颜色</div>  
    <div class="bb">  
    另一种颜色 这里是内容   <br />
        另一种颜色 这里是内容   <br />另一种颜色 这里是内容   <br />另一种颜色 这里是内容   <br />

    </div>  
  </div>  
  <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b> 

 

　　二、利用插件   jQuery Corner

 

  <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="js/JqueryCorner.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('.boxcorner').corner("15px");
</script>


 <div class="boxcorner" style=" background-color:Red; width:200px; height:100px;">
    
    </div>

 

<script language="javascript" src="js/jquery.js" type="text/javascript"></script>
<script language="javascript" src="js/jquery.corner.js" type="text/javascript"></script>

下载这两个文件

<script type="text/javascript">
   $('.boxcorner').corner("15px");
</script>
这段代码就是jquery.corner的调用圆角的方式 这样只要DIV的CLASS为boxcorner 那他就是圆角 背景色在CSS里定义

这里有全部功能
http://malsup.com/jquery/corner/