标签归档:DIV

DIV+CSS 圆角矩形

圆角矩形一般用圆角图片+DIV定位实现,
偶这次完全用DIV+CSS实现了,
本想用做网站的分栏框中,
后来想了下,似乎不太实用,
假如一个页面有10+N个矩形框,
意味着页面中嵌套的DIV至少会有60+N个,
这样冗长的代码,似乎不如图片来得简单,
汗……
不知会不会加重浏览器负担,
另外浏览器兼容性问题还没有测试。
继续汗……
……
似乎钻牛角尖了,
迷茫这种方法是否具有实用价值,

但,代码还是提供出来,寻求更简单的方法ing。

<style>
.ta1,.ta2,.ta3,.ta4,.tb1,.tb2,.tb3,.tb4,.tc{display:block;overflow:hidden;}
.ta1,.ta2,.ta3,.tb1,.tb2,.tb3{height:1px;}
.ta2,.ta3,.ta4,.tb2,.tb3,.tb4,.tc{border-left:1px solid #999;border-right:1px solid #999;background:#CCC;}
.ta1,.tb1{margin:0 5px;background:#999;}
.ta2,.tb2{margin:0 3px;border-width:2px;}
.ta3,.tb3{margin:0 2px;}
.ta4,.tb4{margin:0 1px;height:2px;}
.text{margin:0px 20px;font-size:20px;}
</style>

 

 

 

 

 

  

DIV+CSS 圆角矩形

 

 

 

 

 

</div>