css+div打造圆角“表格”

应该说是圆角矩形区域比较确切，因为这些块虽然是“圆角”的，但没有一种是“表格”，所以说“圆角表格”的叫法是不确切的。

 

<style>
div.bg {...} {background:#ffc20e;width:50%}
b {...} {display:block;}
/**/ /*将所有B标签转成块级元素*/
div b.topb b,div b.bottomb b {...} {height:1px;overflow:hidden;background:#ffc20e;}
/**/ /*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px，溢出部份隐藏,背景色同div.bg的背景色*/
div b.topb,div b.bottomb {...} {background:white}
/**/ /*div标签内类名为topb/bottomb的背景色要与body背景色一致*/
b.t1 {...} {margin:0 5px}
/**/ /*标签margin值将决定溢出的多少值被隐藏*/
b.t2 {...} {margin:0 3px}
b.t3 {...} {margin:0 2px}
b.t4 {...} {margin:0 1px;height:2px;}
</style>

 

< div  align ="center" >
< div  class ="bg" >
< b  class ="topb" > <!-- **此b标签所包含的b标签要进行溢出隐藏** -->
< b  class ="t1" ></ b >
< b  class ="t2" ></ b >
< b  class ="t3" ></ b >
< b  class ="t4" ></ b >
</ b >
< br >
年度总结：涉世未深，好吃懒做，眼高手低，胆小心粗， < br > 爱慕虚荣，贪图富贵，眷恋美色，才疏学浅。
< br >
< br >
< b  class ="bottomb" >
< b  class ="t4" ></ b >
< b  class ="t3" ></ b >
< b  class ="t2" ></ b >
< b  class ="t1" ></ b >
</ b >
</ div >
</ div >