如何使用CSS做出立体表格？
立体表格的制作, 网上有很多的文章介绍. 主要是亮边borderColorLigth和暗边borderColorDark的设置, 形成反差. 产生的立体效果.. 遗憾的是CSS里面没有相对应的设置. 真的不能用CSS定义吗? 看完这文章你就有答案了..
有了CSS的自定义属性Expression.我们就可以自已定义属性了. 可以结合CSS和JS.下面,就来讲一下expression的一个小小的应用. 也就是文章的标题.用CSS做出立体表格.
<script>
//定义table的样式.cellSpacing,cellPadding //borderColorLight ,borderColorDark.
function table3d(obj) { obj.border=1; obj.cellSpacing=0; obj.cellPadding=0; obj.borderColorLight="#FFFFFF"; obj.borderColorDark="#FFFFFF"; }
//定义td的样式. bgColor //borderColorLight, borderColorDark
function td3d(obj) { obj.bgColor="#B7B7B7"; obj.borderColorLight="#000000"; obj.borderColorDark="#EEEEEE"; } </script>
<style> <!--定义样式--> .table3d{baobao:expression(table3d(this))} .td3d{baobao:expression(td3d(this))} </style>
<!--做一个立体表格,变得这么容易.只要有就用一个class就可以了.-->
<table class=table3d><!--应用table3d样式--> <tr align="center"> <td width="86" class=td3d>立体</td><!--应用td3d样式--> <td width="86" class=td3d>表格</td><!--应用td3d样式--> </tr> </table>
说明
.table3d{baobao:expression(table3d(this))} .table3d 定义一个class,应用没什么说的啦.. baobao 是自已定义的属性,你任意取个名字,用你的英文名...因为这是你自己的CSS啊. expression()里面的语句就是JavaScript. 一定很熟悉吧.. table3d(this). 调用了前面我们写的函数.这个函数很简单,只是包含了. 对borderColorLight ,borderColorDark,cellSpacing,等的定义.
这文章只是expression的一个小应用.看了这文章后,不知道有没有什么启发. 用expression给你的网页减减肥吧..让你的网页的代码更精减更模块化...