发新话题
打印

不用css3实现圆角表格方法!

不用css3实现圆角表格方法!

在页面里做圆角的框的时候我们一般都是做成图片形式,其实用css也可以做到这样的效果。瞧~~~~~~~~`
[html]
<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD bgColor=#908a47></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47></TD>
<TD bgColor=#f7f8f9 colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR>
<TD> <TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=1 bgColor=#908a47></TD>
<TD id=oINNER bgColor=#f7f8f9> </TD>
<TD width=1 bgColor=#908a47></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD colSpan=3></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>
[/html]

[此贴子已经被我佛山人于2004-4-3 15:58:55编辑过]

TOP

不知道对大家有没有用,有用就顶一顶吧!

TOP

事实上好像是由表格实现的,CSS在其中并没有起多大作用。圆角处都是由许多1像素的小表格的背景色组成的。

TOP

呵呵~鼓励一下好了~

TOP

支持。

TOP

顶~~~~~~~~~~ 头好痛!

TOP

好像不怎么实用呀

TOP

强!很强!非常强!
圆角可不可以再改大一点!

TOP

作为研究可以,实用性远远比不上用图片来实现
这么麻烦的表格,不用也罢

TOP

我说也是!
用图片方便些!
但是 作为研究是很有必要 的

TOP

不实是不实用但也是方法.

TOP

谢谢
学习了

TOP

这个太费事儿了!真不如用vml editor来实现。

TOP

<fieldset systle="width=220;">

内容

</fieldset>


同样可以实现上面的效果,而且要比上面的要简单得多 ~!
蓦然回首,生活竟如此萧条。。。

TOP

勉强帮你顶半下,好像有点麻烦,还不如,背景图片得好

TOP

思路之一,呵呵,怎么样也要顶一下

TOP

支持;有创意````

TOP

这些代码的字节已经够用图片实现啦

TOP

会有用的....

TOP

和用几百个<div>拼成一个小图标一样,创意不错,只是有些麻烦了

TOP

为了美观牺牲太多了!划不来!

TOP

呵呵~~

TOP

发新话题