为元素添加阴影通过：box-shadow 属性
语法：
box-shadow:h-shadow v-shadow blur spread color inset;
解释：
h-shadow：必须写，这是水平阴影的位置，可以是负数。
v-shadow：必须写，这是垂直阴影的位置，可以是负数。
blur：可选值，这是模糊的距离，不明白一会可以修改下面示例的参数。
spread：可选值，阴影的大小，不明白一会可以修改下面示例的参数。
color：可选，阴影的颜色。
inset：可选，写上就是内侧阴影，不谢就是默认外侧阴影。
下面是我写的例子，将就看一下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Css3阴影效果</title> <style type="text/css"> #demo{ width: 800px; height: 500px; background: #999; margin: 20px auto; } #demo>div{ display: inline-block; width: 360px; height: 400px; line-height: 400px; text-align: center; color: white; font-family: cursive; font-size: 25px; margin-top: 50px; } .demo-top{ background: red; margin-left: 30px; margin-right: 20px; box-shadow: 0px 7px 28.8px 3.2px black; } .demo-bottom{ background: orange; box-shadow: 0px 7px 28.8px 3.2px red inset; } </style> </head> <body> <div id="demo"> <div class="demo-top">这是阴影向外效果</div> <div class="demo-bottom">这是阴影向内效果</div> </div> </body> </html>
