CSS实现的阴影效果

一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们可以直接用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;

        }

 

同时也可以对图片使用这样的方式来添加层：

 

设置大致和文字设置差不多。

 

 

这样做可以不使用图片就可以制作阴影效果，对于需要这样效果而数据大时比较适用。

 

源代码下载