CSS 3增加了box-shadow属性为盒模型添加阴影，该属性可用于为整个盒模型添加阴影。

使用box-shadow属性

　　box-shadow属性可以为所有盒模型的元素整体增加阴影。这是一个复合属性。它包含如下5个值。
　　➢　hOffset：该属性值控制阴影在水平方向的偏移。
　　➢　vOffset：该属性值控制阴影在垂直方向的偏移。
　　➢　blurLength：该属性值控制阴影的模糊程度。
　　➢　scaleLength：该属性值控制阴影的缩放程度。
　　➢　color：该属性值控制阴影的颜色。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> box-shadow属性 </title>
    <style type="text/css">
        div {
            width: 300px;
            height: 50px;
            border: 1px solid black;
            margin: 30px;
        }
    </style>
</head>  
<body>  
<div style="box-shadow: -10px -8px 6px #444;">  
    box-shadow: -10px -8px 6px #444;（左上阴影）</div>
<div style="box-shadow: 10px -8px 6px #444;">  
    box-shadow: -10px 8px 6px #444;（右上阴影）</div>
<div style="box-shadow: -10px 8px 6px #444;">  
    box-shadow: -10px 8px 6px #444;（左下阴影）</div>
<div style="box-shadow: 10px 8px 6px #444;">  
    box-shadow: 10px 8px 6px #444;（右下阴影）</div>
<div style="box-shadow: 10px 8px #444;">  
    box-shadow: box-shadow: 10px 8px #444;（右下阴影，不指定模糊程度）</div>
<div style="box-shadow: 10px 8px 20px #444;">  
    box-shadow: 10px 8px 20px #444;（右下阴影、增大模糊程度）</div>
<div style="box-shadow: 10px 8px 10px -10px red;">  
    box-shadow: 10px 8px 10px -10px red;（右下阴影、缩小阴影区域）</div>
<div style="box-shadow: 10px 8px 20px 15px red;">  
    box-shadow: 10px 8px 20px 15px red;（右下阴影、放大阴影区域）</div>
</body>  
</html>

对表格及单元格添加阴影

　　通过box-shadow属性也可以为表格、单元格添加阴影。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> box-shadow属性 </title>
    <style type="text/css">
        table {
            width: 500px;
            border-spacing: 10px;
            box-shadow: 10px 10px 6px #444; 
        }
        td {
            box-shadow: 6px 6px 4px #444; 
            padding: 5px;
        }
    </style>
</head>  
<body>  
<table>  
    <tr>
        <td>疯狂Java讲义</td>
        <td>疯狂Android讲义</td>
    </tr>
    <tr>
        <td>轻量级Java EE企业应用实战</td>
        <td>疯狂Android讲义</td>
    </tr>
</table>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。