一點陰影可以給平板的設計增加縱深的感覺, 很多時候我們可以直接用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;

??????? }

?

同時也可以對圖片使用這樣的方式來添加層：

?

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

?

?

這樣做可以不使用圖片就可以制作陰影效果，對于需要這樣效果而數據大時比較適用。

?

源代碼下載

轉載于:https://www.cnblogs.com/zhwily/archive/2009/04/23/1442266.html

總結

以上是生活随笔為你收集整理的CSS实现的阴影效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。