css中的圓角樣式佈局一

在網頁設計中，大多網頁爲了美觀，都把區域的四角設計成給人一種圓滑的感覺，下面簡單介紹兩種圓角設計方法：

 

<div id="lt">
  <div class="ss">
   <div class="tt"><div class="ttl"></div><div class="ttr"></div>  </div>
   <div class="bb">
   <div class="t1">標題</div>
   <div class="c" id="cc">
        <!--內容-->
   </div>            
  </div>
   <div class="ss">
      <div class="tl"><div class="tll"></div><div class="tlr"></div></div>
        </div>
       </div>
</div>

 下面是對應的css樣式：

 

#lt{
    float:left;width:200px;
}
.ss{
    width:100%;position:relative;
}
.ttl,.ttr,.tll,.tlr{
    background-image:url(/img/l.gif);background-repeat:no-repeat;overflow:hidden;position:absolute;font-size:1px;
}
#lt .ttl{
    background-position:0 0;top:0;left:0;height:5px;width:5px;
}
#lt .ttr{
    background-position:-11px 0;top:0;right:0;height:5px;width:5px;
}
.bb{
    background:#c00;border:1px solid #000;border-bottom:0;
}
#lt .tll{
    background-position:0 -3px;bottom:0!important;bottom:-1px;left:0;height:5px;width:5px;
}
#lt .tlr{
    background-position:-7px -3px;bottom:0!important;bottom:-1px;right:0;height:5px;width:5px;
}
.tl{
    height:7px;background:url(/img/r.gif) repeat-x;overflow:hidden;width:100%;
}
.t1{
    padding-left:10px;height:20px;line-height:20px;font-size:12px;font-weight:bold;
}
.c{
    background:#FFF;margin:-3px 5px;padding:3px 3px 5px 3px;zoom:100%;
}

 

效果圖如下所示：