标题:css布局圆角表格实现原理是什么?
只看楼主
renqian1320
Rank: 1
等 级:新手上路
帖 子:126
专家分:0
注 册:2005-6-27
 问题点数:0 回复次数:2 
css布局圆角表格实现原理是什么?

用CSS布局一个圆角的表格代码如下: 
<style type="text/css">
div#nifty{ margin: 0 auto;background:#000000;}

div.rtop, div.rbottom{display:block;background:#FFFFFF;}
div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background:#000000;}
div.r1{margin: 0 5px}
div.r2{margin: 0 3px}
div.r3{margin: 0 2px}
div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}
</style>
<div id="nifty">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<p>Junstudio Blog</p>
<p>css实现圆角表格的效果</p>
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
这段代码看的我眼发花,原理不懂,不知道代码为什么这样写,一头的雾水.
希望高手能把基本原理说下,或者把代码解释下,也行,最好是把原理说下,呵呵,其他的我在自己去想吧.急.这问题没解决,我天天发.呵呵,不解决心里不爽.

搜索更多相关主题的帖子: 圆角 css 表格 原理 
2006-04-26 19:34
jenny
Rank: 1
等 级:新手上路
帖 子:91
专家分:0
注 册:2005-9-23
得分:0 
你把代码中的颜色高度部分修改下,就知道圆角表格是怎么拼的
[CODE]

<style type="text/css">
div#nifty{ margin: 0 auto;background:#00ff00;}

div.rtop, div.rbottom{display:block;background:#FFFFFF;}
div.rtop div, div.rbottom div{display:block;height: 10px;overflow: hidden; background:#0000ff;}
div.r1{margin: 0 10px}
div.r2{margin: 0 6px}
div.r3{margin: 0 4px}
div.rtop div.r4, div.rbottom div.r4{margin: 0 2px;height: 2px}
</style>
<div id="nifty">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<p>Junstudio Blog</p>
<p>css实现圆角表格的效果</p>
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>

[/CODE]

2006-04-27 16:52
water123456
Rank: 5Rank: 5
等 级:贵宾
威 望:15
帖 子:3208
专家分:5
注 册:2006-2-21
得分:0 
这样的太麻烦了,还不如用PHotoshop做一个,来个拼接不就行了吗?

让我们风风火火的过一生,别平平淡淡过一年。
2006-04-30 07:46



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-60379-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018935 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved