CSS实现表格阴影

html-css014

CSS实现表格阴影,第1张

1、实践代码：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312">

<title>CSS实现表格阴影</title>

</head>

<body>

<table width=300 height=215 align=left bordercolor="#FF9966" bgcolor=#f3f3f3

style="filter:progid:DXImageTransform.Microsoft.Shadow

(Color=#666666,Direction=120,strength=5)">

<tr>

<td width="230" bgcolor="#FF9966" align="center">

这是一个表格阴影特效，用CSS实现的。</a>

</td>

</tr>

</table>

</body>

</html>

2、用纯CSS代码实现的表格阴影代码，这里仍然是用到了filter属性，至于阴影阴影透明义或偏移角度可以自选调整，仅提供一种思路。

可以用css3的box-shadow属性。

举个例子

table{

box-shadow: 10px 10px 5px #888888// (水平阴影的位置 垂直阴影的位置 模糊距离 阴影的颜色)

}

注意兼容性~他还可以进行叠加，产出更加惊艳的效果~~