圆角表格几种制作方法机源码.doc

与标准同行，浅谈圆角表格！2007年11月14日 星期三 下午 01:17与标准同行，浅谈圆角表格！圆角表格,困扰我们多年的问题,今天!决定尝试一种最佳方法我准备从今天开始 尝试最简单的圆角表格的做法,如果各位有什么好点子,欢迎讨论.我大概总结了几点:1.使用程序制作圆角表格2.障眼法，非常笨拙的方法实现园角表格3.图片模拟园角表格4.flash模拟园角表格5.字符，在转角处使用字符当作园角6.滥竽充数，兼容性非常差，基本上没有用武之地7.CSS3地实现方法 简介8.Mozilla 的专有属性9.等待你的想法1.使用程序制作圆角表格 复杂程度:5 兼容性能:3使用最普遍的是 VML, 但是严格的说，VML不能全属于，应为他在执行前是代码，但是执行以后，把代码转换成了图片，其最终效果其实是图片。以下是一个例子：v:*behavior:url(#default#VML) VML 还有一种方法，是使用纯JS制作的，代码忒长，特别复杂，一般用不着，不过我还是认为设计者的创意非常有意思关于JS园角表格制作方法:/jsgraphics/jsgraphics_e.htm#notes2。使用障眼法 复杂程度:4 兼容性能:4这个方法已经严重的违背了标准，并且代码复杂，在远处看类似一个园角表格，其实仅仅是使用表格堆积而成: 3.图片模拟园角表格 复杂程度:2 兼容程度5现在使用最普遍的,是使用背景图片，缺点是，不可伸缩但是，我看见了一个很巧妙的方法,他使用了2个div，很巧妙地进行了互补，并且可以自入伸缩，可能这是我见过所有方法里面最简单实用的一种。Flexible box with custom corners and borders | Lab | 456 Berea Streethtml,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(/lab/flexible_custom_corners_borders/borders.gif) 100% 0 repeat-y;.bi padding:0 0 0 12px;background:#fff url(/lab/flexible_custom_corners_borders/borders.gif) 0 0 repeat-y;.bt height:17px;margin:0 -12px;background:url(/lab/flexible_custom_corners_borders/box.gif) 100% 0 no-repeat;.bt div width:18px;height:17px;background:url(/lab/flexible_custom_corners_borders/box.gif) 0 0 no-repeat;.bb height:17px;margin:0 -12px;background:url(/lab/flexible_custom_corners_borders/box.gif) 100% 100% no-repeat;.bb div width:18px;height:17px;background:url(/lab/flexible_custom_corners_borders/box.gif) 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; Flexible box with custom corners and bordersThis 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.Two images are used. box.gif is a complete box. For the sake of this demo Ive made it 1600 pixels wide. It is used for the corners and the horizontal borders. The other image,borders.gif, contains the vertical borders. Why use a single, large image for the corners instead of several smaller ones? There are several reasons: 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. To minimize the number of HTTP requests sent to the server. Convenience. When changing the look of the borders and corners, replacing two files is faster than replacing eight files.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 wont 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 :before and :after pseudo-elements, but since Internet Explorer doesnt support them Ill leave the extra markup in there.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 div to put all your content in. 4.flash制作园角表格 复杂程度:3 兼容程度3我比较青睐的方法，适合小型网页的制作，此法伸缩性和兼容性都不错，并且可以作出图片不能达到的效果，唯一的缺点就是，flash的方法是网页复杂许多。抱歉，我实在找不着例子.希望谁找到了PM我。5.字符充当园角表格 复杂程度:3 兼容程度4这个方法是 lexrus(小龟)发明出来的，当我第一次见到这个方法，真地把我吓了一跳，其实它是在转角处增加了一个 转弯字符 & .抱歉。我实在找不着这个方法的例子。希望谁找到了PM我。6.滥竽充数 复杂程度:1 兼容程度1想到此方法的人 绝 + 笨很容易看出，这个其实就是 windows fieldset，在 win2k & win2k-的操作系统看不出来此效果，content7.CSS3的方法 复杂程度:2 兼容程度0这可能是大家期待css3得最主要原应，现在Css3还没有退出，如果一旦推出，这估计是最好的圆角表格制作方法。找了一篇文章，介绍了css3的，似乎mozilla也支持这个属性 http:/www.webreference.