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 style=”width:50%;”>
 <div class=”ta1″></div>
 <div class=”ta2″></div>
 <div class=”ta3″></div>
 <div class=”ta4″></div>
  <div class=”tc”>
   <h1 class=”text””>DIV+CSS 圆角矩形</h1>
  </div>
 <div class=”tb4″></div>
 <div class=”tb3″></div>
 <div class=”tb2″></div>
 <div class=”tb1″></div>
</div>

TrackBack: http://mimiz.cn/index.php/web/div-css-rectangle/trackback/
2 Responses to “DIV+CSS 圆角矩形”
  1. JJim Says:

    学习了 :smile:

  2. 今日黄金价格每克 Says:

    不错支持下!

Leave a Reply !

^_^您敢留下回复吗?