CSS实现圆角--CSDN技术导航中的圆角列表

CSS实现圆角--CSDN技术导航中的圆角列表

今天看到CSDN技术导航页中的圆角列表，发现他的实现手法很有趣，我还是第一次看到这种技术（落伍了
-_-||)。这种手法主要是利用左右浮动的白点把父DIV的背景颜色遮住以实现圆角。其实和利用线条实现圆角的思想一样。
效果如下图：

废话少说，我们直接看代码：

  1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
  3  < head >
  4  < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
  5  < title > 浮动点实现圆角 </ title >
  6  < style  type ="text/css" >
  7  *  {
  8      margin : 0 ;
  9      padding : 0 ;
 10  }
 11  body  {
 12      font : 12px/150% Georgia, "Times New Roman", Times, serif ;
 13  }
 14  #box  {
 15      width : 400px ;
 16      margin : 10px auto ;
 17      background : #fbf ;
 18      overflow : hidden ;
 19  }
 20  #box h3  {
 21      color : #fff ;
 22      padding : 5px 10px ;
 23  }
 24  #box p  {
 25      background :  #fff ;
 26      margin : 0 1px ;
 27      padding : 10px ;
 28      text-indent : 2em ;
 29      line-height : 160% ;
 30  }
 31  #box .pl_1  {
 32      float : left ;
 33      height : 2px ;
 34      width : 1px ;
 35  }
 36  #box .pl_2  {
 37      float : left ;
 38      height : 1px ;
 39      width : 2px ;
 40  }
 41  #box .pl_3  {
 42      float : left ;
 43      height : 1px ;
 44      width : 4px ;
 45  }
 46  #box .pr_1  {
 47      float : right ;
 48      height : 2px ;
 49      width : 1px ;
 50  }
 51  #box .pr_2  {
 52      float : right ;
 53      height : 1px ;
 54      width : 2px ;
 55  }
 56  #box .pr_3  {
 57      float : right ;
 58      height : 1px ;
 59      width : 4px ;
 60  }
 61  #box .pc  {
 62      background : #fff ;
 63   +overflow : hidden ;
 64  }
 65  .clear_float  {
 66      +zoom : 1 ;
 67  }
 68  .clear_float:after  {
 69      content : "" ;
 70      height : 0 ;
 71      clear : both ;
 72      visibility : hidden ;
 73      display : block ;
 74  }
 75  </ style >
 76  </ head >
 77  < body >
 78  < div  id ="box" >
 79     < div  class ="clear_float" >
 80       < div  class ="pr_3 pc" ></ div >
 81       < div  class ="pl_3 pc" ></ div >
 82     </ div >
 83     < div  class ="clear_float" >
 84       < div  class ="pr_2 pc" ></ div >
 85       < div  class ="pl_2 pc" ></ div >
 86     </ div >
 87     < div  class ="clear_float" >
 88       < div  class ="pr_1 pc" ></ div >
 89       < div  class ="pl_1 pc" ></ div >
 90     </ div >
 91     < h3 > round corner </ h3 >
 92     < p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus.  </ p >
 93     < div  class ="clear_float" >
 94       < div  class ="pr_1 pc" ></ div >
 95       < div  class ="pl_1 pc" ></ div >
 96     </ div >
 97     < div  class ="clear_float" >
 98       < div  class ="pr_2 pc" ></ div >
 99       < div  class ="pl_2 pc" ></ div >
100     </ div >
101     < div  class ="clear_float" >
102       < div  class ="pr_3 pc" ></ div >
103       < div  class ="pl_3 pc" ></ div >
104     </ div >
105  </ div >
106  </ body >
107  </ html >

jimmy1985