偶然突發奇想想到瞭小時候做的藝術字，就是在筆畫比較寬的字右邊加上線條做成立體效果，我覺得這種想法也是可以使用 CSS 來實現的，通過一點點 CSS 就可以造成陰影效果，比如增加 border 並且配合使用相對定位來做一些浮動的效果，或者凸出來那樣或者凹進去的按鈕。要麼就是字體通過字體疊加也能夠實現陰影效果。下面就來介紹一種實現陰影效果的方法。
陰影效果一般就是用來配合在進行一些點擊或者鼠標浮動的時候會出現效果反饋。這裡為瞭便於說明我使用瞭 ul來搭建框架,前面的日志也介紹過如何使用 ul 來制作自己想要的列表菜單，這裡就不多說啦。有人反映 CSS 占得高度過大，所以這次在高度上進行瞭壓縮。我已經盡量的所見 CSS 的各項屬性，爭取使每一個屬性都有自己無法被取代的意義。如果有不明白的地方可以M我。
設計思想：
兩個相同的文字進行錯位疊加造成陰影效果，專業的說法是滑動門技術 …
註意事項:
1總體 bgcolor 要在 ul 中進行設定托底
2在 li 中控制字符具體的排列，這裡我沒有設置 width 所以是按照內容自動擴展的，以後以可以在這裡使用定寬，因為是使用瞭兩層 span 來實現陰影，特別還給陰影 span 加瞭偏移，所以在 span 中控制字體的位置的話會杯具的。
3陰影 span 的偏移可以自定義。字體大點兒的話，可以偏移多一些。另外陰影 span position 設置成 absolute 後，圖層會自動前移的(凸顯在前端)。
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>CssFontShadow.html</title>
05
06 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
07 <meta http-equiv="description" content="this is my page">
08 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
09 <script src="http://code.jquery.com/jquery-latest.js"></script>
10
11 <!– bgcolor 1165a1 border 1px solid #0D5995 –>
12 <!–<link rel="stylesheet" type="text/css" href="./styles.css">–>
13 <style type="text/css">
14 body{margin: 0;padding: 0;}
15 ul{margin: 200px auto;padding: 0;background-color: #1165a1;width: 600px;}
16 ul li{list-style: none;margin: 0;position: relative;float: left;background-color: transparent;border-right: 1px solid #0D5995;padding: 10px;}
17 ul li span{margin: 0;font-size: 1em;color: white;background-color: transparent;position: relative;cursor: pointer;}
18 ul li span.shadow{color: #131C25;position: absolute;top: 11px;left: 11px;}
19 ul li span.hide{display: none;}
20 p.clear{clear: both;}
21 </style>
22 <script type="text/javascript">
23 // 跟以往不同，元素由多個層級進行疊加的話則不能使用常規的 css 來改變樣式瞭
24 $(document).ready(function(){
25
26 /* 鼠標懸停事件綁定 */
27 $("ul").delegate(".over","mouseover",function(){
28 $(this).parent().find(".shadow").toggleClass("hide");
29 });
30
31 /* 鼠標懸停事件綁定 */
32 $("ul").delegate(".over","mouseout",function(){
33 $(this).parent().find(".shadow").toggleClass("hide");
34 });
35
36 /* 鼠標點擊事件綁定 */
37 $("ul").delegate(".click","click",function(){
38 $(this).parent().find(".shadow").toggleClass("hide");
39 });
40
41 });
42
43 </script>
44 </head>
45
46 <body>
47 <ul>
48 <li>
49 <span title="沒有陰影效果">noEffect</span>
50 </li>
51 <li>
52 <span class="shadow">withShadow</span>
53 <span title="有陰影效果">withShadow</span>
54 </li>
55 <li>
56 <span class="shadow hide">mouseOverChange</span>
57 <span title="鼠標懸停陰影效果" class="over">mouseOverChange</span>
58 </li>
59 <li>
60 <span class="shadow hide">mouseClickChange</span>
61 <span title="鼠標點擊陰影效果" class="click">mouseClickChange</span>
62 </li>
63
64 <p class="clear"></p>
65 </ul>
66 </body>
67
68 </html>
作者：香吉士