深山老林

2006-10-19[原]用CSS画简单的圆角

近来总看到圆角：有用图做的、用JS打出来的。不太愿意用，不过有时也是真的没办法，这里介绍一种用CSS画的简单的圆角，只用于抛砖引玉，大家可以再发挥。

----------------------------------------------HTML---------------------------------------------------------
<div class="bim212">
 <!-- S top -->
 <div class="bim-t">
  <div class="bim-tt"></div>
  <div class="bim-tm"></div>
  <div class="bim-tb"></div>
 </div>
 <!-- E top -->
 <!-- S main -->
 <div class="bim-m">
  测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
 </div>
 <!-- E main -->
 <!-- S bottom -->
 <div class="bim-b">
  <div class="bim-bt"></div>
  <div class="bim-bm"></div>
  <div class="bim-bb"></div>
 </div>
 <!-- E bottom -->
</div>
----------------------------------------------------------------------------------------------------------------

----------------------------------------------CSS---------------------------------------------------------
 .bim212{
 /*定义框大小*/
  width:auto;
  height:auto;
 }
  .bim-tt,.bim-bb,.bim-tm,.bim-bm,.bim-tb,.bim-bt,.bim-m{
  /*定义框颜色*/
   border-color:#FF6347;
  }
  .bim-t,.bim-b{
  /*上部和下部*/
   width:auto;
   height:4px;
   font-size:0;
   line-height:0;
  }
   .bim-tt,.bim-bb{
    width:auto;
    height:0;
    margin:0 4px;
    border-top-width:1px;
    border-top-style:solid;
   }
   .bim-tm,.bim-bm{
    width:auto;
    height:1px;
    margin:0 2px;
    border-left-width:2px;
    border-right-width:2px;
    border-left-style:solid;
    border-right-style:solid;
   }
   .bim-tb,.bim-bt{
    width:auto;
    height:2px;
    margin:0 1px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
   }
  .bim-m{
   width:auto;
   height:auto;
   padding:3px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
  }
----------------------------------------------------------------------------------------------------------------

其实跟九宫格差不多，只是把上面两部分换成了圆角，不过想画不同的圆角，所用到的样式是不相同的，所以这个方法的灵活性不好，唯一的优点也许就是没用到图片跟脚本吧。:P