〖转帖〗浅谈圆角表格

独孤浪云 · 发表于 2005-10-11 21:57

云:本文转载自http://www.blueidea.com.作者ID是:不含ppa
原文地址是:http://www.blueidea.com/bbs/newsdetail.asp?id=1881447&posts

圆角表格,困扰我们多年的问题,今天!
决定尝试一种最佳方法
我准备从今天开始尝试最简单的圆角表格的做法,如果各位有什么好点子,欢迎讨论.

我大概总结了几点:
1.使用程序制作圆角表格
2.障眼法，非常笨拙的方法实现园角表格
3.图片模拟园角表格
4.flash模拟园角表格
5.字符，在转角处使用字符当作园角
6.滥竽充数，兼容性非常差，基本上没有用武之地
7.CSS3地实现方法简介
8.Mozilla 的专有属性
9.等待你的想法

1.使用程序制作圆角表格复杂程度:5 兼容性能:3

使用最普遍的是 VML, 但是严格的说，VML不能全属于，应为他在执行前是代码，但是执行以后，把代码转换成了图片，其最终效果其实是图片。

以下是一个例子：

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>

复制代码

还有一种方法，是使用纯JS制作的，代码忒长，特别复杂，一般用不着，
不过我还是认为设计者的创意非常有意思
关于JS园角表格制作方法:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm#notes

2。使用障眼法复杂程度:4 兼容性能:4

这个方法已经严重的违背了标准，并且代码复杂，在远处看类似一个园角表格，其实仅仅是使用表格堆积而成:

<center>
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
<tr height=1>
<td rowspan=4 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=2 width=1></td>
<td width=2></td>
<td bgcolor=#43B5C9></td>
<td width=2></td>
<td rowspan=2 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=4 width=1></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td colspan=3 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=2>
<td bgcolor=#43B5C9></td>
<td colspan=5 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=0 width=282 height=200 align=center bgcolor=#43B5C9>
<tr><td></td></tr>
</table>

复制代码

3.图片模拟园角表格复杂程度:2 兼容程度5

现在使用最普遍的,是使用背景图片，缺点是，不可伸缩

但是，我看见了一个很巧妙的方法,他使用了2个div，很巧妙地进行了互补，并且可以自入伸缩，可能这是我见过所有方法里面最简单实用的一种。

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]" xml:lang="en" lang="en">
<head>
<title>Flexible box with custom corners and borders | Lab | 456 Berea Street
</title>
<style type="text/css" media="screen,print">
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:10px;
font:76%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
/* CSS for the box starts here */
.box {
padding:0 12px 0 0;
background:#fff url([img]http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif[/img]) 100% 0 repeat-y;
}
.bi {
padding:0 0 0 12px;
background:#fff url([img]http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif[/img]) 0 0 repeat-y;
}
.bt {
height:17px;
margin:0 -12px;
background:url([img]http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif[/img]) 100% 0 no-repeat;
}
.bt div {
width:18px;
height:17px;
background:url([img]http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif[/img]) 0 0 no-repeat;
}
.bb {
height:17px;
margin:0 -12px;
background:url([img]http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif[/img]) 100% 100% no-repeat;
}
.bb div {
width:18px;
height:17px;
background:url([img]http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif[/img]) 0 100% no-repeat;
}
.box h1 {
margin:0;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
.box p, .box ul {
margin:0;
padding:4px 10px;
background:#fff;
}
.box li {
margin:0 0 0 2em;
padding:0;
}
</style>
</head>
<body>
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<h1>Flexible box with custom corners and borders</h1>
<p>This is a demo of a flexible box with custom corners and custom borders.
The box will expand to contain any amount of content vertically, will handle
any text size, and can become very wide before the horizontal borders start
breaking up. How wide depends on the width of one of the background images.</p>
<p>Two images are used. <a href="box.gif"><code>box.gif</code></a> is a
complete box. For the sake of this demo I’ve made it 1600 pixels wide. It
is used for the corners and the horizontal borders. The other image,
<a href="borders.gif"><code>borders.gif</code></a>, contains the vertical
borders. Why use a single, large image for the corners instead of several
smaller ones? There are several reasons:</p>
<ul>
<li>Splitting the image into a bunch (six in this case – one for each
corner plus the top and bottom borders) of smaller images may actually
increase the total file size, depending on the look of the corners and
borders.</li>
<li>To minimize the number of HTTP requests sent to the server.</li>
<li>Convenience. When changing the look of the borders and corners,
replacing two files is faster than replacing eight files.</li>
</ul>
<p>Some extra markup is needed to put the corners and borders in place.
A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal,
and won’t get in the way if CSS is off, so I think I can live with it. It
is possible to get rid of some more markup by using the <code>:before</code>
and <code>:after</code> pseudo-elements, but since Internet Explorer doesn’t
support them I’ll leave the extra markup in there.</p>
<p>The main content area of this box can be filled with any elements you
like, as long as their background colour is set to white (or whatever colour
the inside of your box has), and their margins are zeroed. If the content
is transparent the left border will be doubled because the image used to
create it also contains the right border. You can avoid the need for that
by splitting the image in two, or adding an extra <code>div</code> to put
all your content in.</p>
<div class="bb">
<div>
</div>
</div>
</div>
</div>
</body>
</html>

复制代码

4.flash制作园角表格复杂程度:3 兼容程度3
我比较青睐的方法，适合小型网页的制作，此法伸缩性和兼容性都不错，并且可以作出图片不能达到的效果，唯一的缺点就是，flash的方法是网页复杂许多。

抱歉，我实在找不着例子...希望谁找到了PM我。

5.字符充当园角表格复杂程度:3 兼容程度4

这个方法是 lexrus(小龟)发明出来的，当我第一次见到这个方法，真地把我吓了一跳，其实它是在转角处增加了一个转弯字符 "╭" & "╮".

抱歉。。我实在找不着这个方法的例子。。希望谁找到了PM我。

6.滥竽充数复杂程度:1 兼容程度1
想到此方法的人绝 + 笨

很容易看出，这个其实就是 windows fieldset，在 win2k & win2k-的操作系统看不出来此效果，

7.CSS3的方法复杂程度:2 兼容程度0
这可能是大家期待css3得最主要原应，现在Css3还没有退出，如果一旦推出，这估计是最好的圆角表格制作方法。

找了一篇文章，介绍了css3的，似乎mozilla也支持这个属性
www.webreference.com/dhtml/column70/2.html

这还有一片官方的，不如上面那个详细，但是这里不仅仅有圆角表格的做法，还有很多其他花样的做法。
www.w3.org/TR/2002/WD-css3-border-20021107/#border-radius

8.Mozilla的专有css属性复杂程度:2 兼容程度1
-moz-border-radius 在google上面居然查不出来，很神秘的属性，不过据我研究，可能就是 7.CSS3的方法.

如果文章还有什么不全面的，欢迎大家讨论

1.与标准同行 - 1.CSS命名规范
2.与标准同行 - 2.浅谈圆角表格
3.待续...

PS:因为条件所限,本文转载的不是很严整.抱歉.

笨笨啊 · 发表于 2005-11-15 03:05

小懒车 · 发表于 2005-11-15 13:10

值得收藏!~~
嘿嘿!~~
顶一下!~

〖转帖〗浅谈圆角表格

相关帖子

浏览过的版块