用CSS做图层的投影效果,css2是做不到的，在css3中，我们可以通过box-shadow 内阴影与外阴影来实现，用法是，E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}，对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}；这里我们通过代码来理解：
<html>
<head>
<style>
#nav{
width:900px
height:30px
-moz-box-shadow:5px 5px 5px #999 inset
-webkit-box-shadow:5px 5px 5px #999 inset
box-shadow:5px 5px 5px #999 inset
}
</head>
<body>
<div class="nav" >
</div>
</body>
</html>
效果如图：
CSS3的动画的优点：1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单
但其缺点也很明显：
1.在动画控制上不够灵活
2.兼容性不好
3.部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。
所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。
完全可以，不过效果和ps出来的还是会有差距的。<style>
.gaguang{width:300pxtext-align:center}
.box{width: 300px
height: 100px
background: #3B4C2C
border: 4px solid white
box-shadow: 0 0 10px #333
border-radius: 10px
opacity: 0.8}
.gg{width: 400px
height: 200px
border-radius: 45%
margin-top: -265px
z-index: 1
background: white
opacity: 0.1
margin-left: -45px}
.wz{z-index:0position:absolutetop:40pxcolor:#fffwidth:300px}
</style>
<div class="gaguang">
<div class="box"></div>
<div class="wz">这里是内容,这里是内容,</div>
<div class="gg"></div>
</div>
