水阁教程系列之——CSS打造水晶表格+虚线表格 - 00兰的日志

水阁教程系列之CSS打造水晶表格+虚线表格

最近上网发现，水晶框架表格非常流行（类似网易博客主页用的导航栏样式），试着用CSS编写了一下，测试结果——然！！！！下面把具体代码写出来，供大家交流。

（一）水晶感觉的表格

代码如下：<table width="200" height="211" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FF9999" >
<tr>
<td height="27" bgcolor="#FF9999" style="filter: Blur(Add=true, Direction=180, Strength=20)"> </td>
</tr>
<tr>
<td height="184" valign="top">
</td>
</tr>
</table>

      说明:水晶表格应用了CSS的Blur滤镜
      调用方法:style="filter: Blur(Add=true, Direction=180, Strength=20)
      我们看到blur属性有三个参数:add、direction、strength.其中:Add参数有两个参数值:true和false,意思是指定图片是否被改变成模糊效果;Direction参数用来设置模糊的方向,模糊效果是按照顺时针方向进行的,其中0度代表垂直向上，每45度一个单位,默认值是向左的270度;Strength参数值只能使用整数来指定,它代表有多少像素的宽度将受到模糊影响,默认值是5像素.

（二）虚线表格

代码如下：
<table width="240" height="182" border="0" cellpadding="0" cellspacing="0" bordercolor="#99FFFF">
<tr>
<td style="BORDER-BOTTOM: #99CCFF 1px dashed;BORDER-top: #99CCFF 1px dashed;BORDER-left: #99CCFF 1px dashed;BORDER-right:#99CCFF 1px dashed"> </td>
</tr>
</table>

说明：
调用格式：
style="BORDER-BOTTOM: #99CCFF 1px
dashed;BORDER-top: #99CCFF 1px dashed;BORDER-left: #99CCFF 1px dashed;BORDER-right:#99CCFF 1px dashed"
分别表示：
下边框属性：颜色、边框宽度
上边框属性：颜色、边框宽度
左边框属性：颜色、边框宽度
右边框属性：颜色、边框宽度
dashed：表示虚线，可以用以下样式替换
dotted：点划线；solid：实线；double：双线
注意：可以单独定义上下左右边框的样式，也可以联合滤镜定义，打造个性十足的边框！

水阁logo链接代码：

水阁所有教程经00兰辛苦揣摩整理而成，转载请务必注明出处。

更多教程请访问水阁雜貨鋪
点击圆形图标进入雜貨鋪目录

00兰的小水阁@2004-2007
更多请访问http://w-lan.blog.163.com