圆角效果 

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>圆角层实例</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <style type="text/css">
    /*注:这里的"b"元素,不是HTML的"b"标签,只相当于一个普通DIV*/
    body{
    margin:20px 10px;
    background-color: #FFF;
    font:12px;
    }
    #vessel{/*容器DIV*/
    width:800px;
    background: #9BD1FA
    }
    b.rtop, b.rbottom{/*圆角矩形顶部和底部设置块状显示及背景颜色*/
    display:block;
    background: #fff;
    }
    b.rtop b, b.rbottom b{/*设置顶部和底部组成圆角的各元素块状显示和高度为1像素,及背景颜色,overflow为了适应IE6*/
    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 id="vessel">
    <b class="rtop">
      <b class="r1"></b>
      <b class="r2"></b>
      <b class="r3"></b>
      <b class="r4"></b>
    </b>
    这里是测试文字,配合表现圆角效果!<br />亲测通过浏览器IE6,IE7,FF,Chrome
    <b class="rbottom">
      <b class="r4"></b>
      <b class="r3"></b>
      <b class="r2"></b>
      <b class="r1"></b>
    </b>
    </div>
    </body>
    </html>

 

posted @ 2014-07-14 19:01  madwoman  阅读(260)  评论(0)    收藏  举报