CSS实现表格阴影
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS实现表格阴影相关的知识，希望对你有一定的参考价值。
我想实现表格中右边框和下边框有阴影的效果，我在网上找到两种方法，第一种方法是通过控件实现的：
tablefilter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)
但这种方法会在四个边都实现边框效果。
另一种方法是通过css+div来实现的，
<html>
<head>
<title>用CSS实现表格边框阴影效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body
margin: 0px;
padding: 20px;
font-family: verdana;
font-size: 12px;
/* CSS container shadow */
#shadow-container
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container
position: relative;
left: -1px;
top: -1px;
#shadow-container .shadow1
background: #F1F0F1;
#shadow-container .shadow2
background: #DBDADB;
#shadow-container .shadow3
background: #B8B6B8;
#shadow-container .container
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
/* CSS container shadow */
</style>
</head>
<body>
<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="shadow1">
用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果 </div>
<br />
<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果用CSS实现表格边框阴影效果
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这种方法可以实现两个边框有阴影的效果，但嵌套在我的程序里总显示不正常，可能是继承了table的样式，而我的css+div不是很熟，请高手交个简单的方法。比如用空间实现，但可以控制只有两个边有阴影效果。谢谢！
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 bgcolor="#FF9966" align="center">
这是一个表格阴影特效，用CSS实现的。</a>
</td>
</tr>
</table>
</body>
</html>
2、用纯CSS代码实现的表格阴影代码，这里仍然是用到了filter属性，至于阴影阴影透明义或偏移角度可以自选调整，仅提供一种思路。
参考技术A 我这里有一个超级简单的方法，但是阴影效果没你的好。.out
position:relative;
background:#bbb;
margin:10px auto;
width:100%;
.in
background:#fff;
border:1px solid #555;
padding:10px 5px;
position:relative;
top:-5px;
left:-5px;
<div class="out">
<div class="in" >
<p>这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容</p>
<p>把需要阴影的东西放在id为in的div里就可以了。</p>
</div>
</div>
参考资料：http://www.cainiao8.com/web/cssing/3/01.html
本回答被提问者和网友采纳 参考技术B 这个只有在IE6等几个少数的才支持如何用CSS实现DIV块的阴影效果
参考技术A 可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc)。\\x0d\\x0a直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\\x0d\\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。以上是关于CSS实现表格阴影的主要内容，如果未能解决你的问题，请参考以下文章