如何不用图片实现圆角？

用CSS可看看这个案例学习一下<style type="text/css">
<!--
#ibox01 {
 overflow: hidden;
 height: 1px;
 margin-right: 5px;
 margin-left: 5px;
 background-color: #CC0000;
}
#ibox02 {
 height: 1px;
 margin-right: 3px;
 margin-left: 3px;
 border-right-width: 2px;
 border-left-width: 2px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
 overflow: hidden;
}
#ibox03 {
 height: 1px;
 margin-right: 2px;
 margin-left: 2px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
 overflow: hidden;
}
#ibox04 {
 overflow: hidden;
 height: 1px;
 margin-right: 1px;
 margin-left: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
}
#ibox05 {
 overflow: hidden;
 height: 1px;
 margin-right: 1px;
 margin-left: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
}
#boxcon {
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
}
.testlayer {
 height: 200px;
 width: 300px;
}
.testboxbg {
 background-color: #666666;
}
.testboxcon {
 height: 190px;
 background-color: #666666;
 position: relative;
}
-->
</style>
<div class="testlayer">
<div id="ibox">
  <div id="ibox01" class="testboxbg"></div>
  <div id="ibox02" class="testboxbg"></div>
  <div id="ibox03" class="testboxbg"></div>
  <div id="ibox04" class="testboxbg"></div>
  <div id="ibox05" class="testboxbg"></div>
  <div id="boxcon" class="testboxcon"></div>
  <div id="ibox05" class="testboxbg"></div>
  <div id="ibox04" class="testboxbg"></div>
  <div id="ibox03" class="testboxbg"></div>
  <div id="ibox02" class="testboxbg"></div>
  <div id="ibox01" class="testboxbg"></div>
</div>
</div>

解决方案 »

  1.   

    以前找的代码,不知道是不是你想要的
    <style>
    #d1,#d3,#d4{
     margin:5px 0px;
     width:200px;
     background-color:#eee;
    }
    #d1{
     border:1px solid #444;
     height:100px;
     padding:0px 15px;
    }
    #d3,#d4{
     margin-top:0px;
     margin-bottom:0px;
     border-left:1px solid #444;
     border-right:1px solid #444;
    }
    .m{
     height:100px;
     width:200px;
     padding:0px 15px;
     position:relative;
    }
    #d3 .m{
     margin:-4px 0px;
    }
    #d4 .m{
     margin:-5px 0px;
    }
    .rt,.rb{
     display:block;
     width:232px;
     margin-left:0px;
     margin-right:0px;
    }
    .rt{
     margin-top:5px;
    }
    .rb{
     margin-bottom:5px;}
    .rt *,.rb *{
     display:block;
     height: 1px;
        overflow: hidden;
     background-color:#eee;
     border-left:1px solid #444;
     border-right:1px solid #444;
    }
    .r1{
     margin: 0 5px;
     background-color:#444;
    }
    .r2{
     margin: 0 3px;
     border-width:0px 2px;
    }
    .r3{
     margin: 0 2px;
    }
    .r4{
     margin: 0 1px;
     height: 2px;
    }.rb1{
     margin: 0 6px;
     background-color:#444;
    }
    .rb2{
     margin: 0 4px;
     border-width:0px 2px;
    }
    .rb3{
     margin: 0 3px;
    }
    .rb4{
     margin: 0 2px;
    }
    .rb5{
     margin: 0 1px;
     height: 2px;
    }
    </style>
    <script> 
    </script>
    </head>
    <body>
    <div id="d1">R=...</div>
    2
    <b class="rt">
     <b class="r1"></b>
     <b class="r2"></b>
     <b class="r3"></b>
     <b class="r4"></b>
     </b><div id="d3">
    <div class="m">R=5</div>
    </div><b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>3
    <b class="rt">
    <b class="rb1"></b>
    <b class="rb2"></b>
    <b class="rb3"></b>
    <b class="rb4"></b>
    <b class="rb5"></b>
    </b><div id="d4">
    <div class="m">R=6</div>
    </div>
    <b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b class="rb2"></b><b class="rb1"></b></b>
      

  2.   

    你搜索下
    div实现圆角矩形或table实现圆角矩形（表格）
      

  3.   

    vml<html xmlns:v>
    <head>
    <title></title>
    <style>
    v\:*{behavior:url(#default#VML);}
    </style>
    <head>
    <body>
    <v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
    </body>
    </html>
      

  4.   

    firefox支持直接实现圆角。lz可以查一下mozilla的css规则。
      

  5.   

    http://pro.html.it/esempio/nifty/看看这个吧，很多例子的