一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们可以直接用PhotoShop直接制作带阴影的图片以供使用
但是对于一些和用户交互的，特别是对于一些简单的文字层，如果用图片就不太好处理。
这里介绍的是一种不需要使用背景图片, 而只需要用CSS完成的。
效果图：
实现的方法主要是2个层。一个层用做背景，然后把这个层做为背景。另一个层做容器放入文字或是交互的内容。
<div class="shadow"> //背景层
<div class="content"> //容器层
<h1>用户登录</h1>
<table>
<tr>
<td>用户名：</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>密 码：</td>
<td>
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<asp:TextBox ID="txtValidCode" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnLogin" runat="server" Text=" 登 录 " />
</td>
</tr>
</table>
</div>
</div>
所用到的CSS：
.shadow
{
background: #cccccc;
position: relative;
width:400px;
}
.shadow .content
{
background:#EFEFEF;
padding:0 0 10px 0;
height:180px;
position: relative;
top:-5px;
left:-5px;
text-align:center;
}
同时也可以对图片使用这样的方式来添加层：
设置大致和文字设置差不多。
这样做可以不使用图片就可以制作阴影效果，对于需要这样效果而数据大时比较适用。