HTML文字顯示如何添加投影效果？

在HTML開發裏，有時為了突出顯示效果，需要為一些標題文字添加投影效果。要實現這個效果，在以前的做法裏，就是需要圖片來完成，先用PS做一些有投影效果的文字，然後再放在html裏顯示出來。這樣就太麻煩了，修改文字後，還需要重新做新的圖片。
現在我們可以利用CSS3來為文字添加投影效果，如何操作？下面一起看下。

操作方法

（01）首先看下我們的示例代碼，很簡單的html代碼，一個p標籤下有幾個文字，然後用css樣式定義了這些文字的樣式：字體顏色和字體大小。代碼如圖

（02）運行頁面，看到沒投影的字體顯示如圖。

（03）要添加文字投影，我們可以為其加上樣式：text-shadow: 2px 2px 3px #000，如圖，

（04）再次運行頁面，可以得到有投影效果的文字了。

（05）這個樣式的數值具體是代表什麼？我們可以先改變樣式的前二個值，改成 text-shadow: 16px 16px 3px #000

（06）再看下效果，如圖。從圖中我們就可以看出，樣式前二個數值是對應文字投影的位置的，其中第一個數值是在x軸上的位置，值越大，投影的位置越往右靠；第二個數值是在y軸上的位置，值越大，投影的位置越往下靠。

（07）第三個數值代表的是投影的模糊程度，值越小，就越清晰。比如把代碼改成 text-shadow: 16px 16px 0 #000，效果如圖，沒有模糊度，和原版文字一樣。

（08）把模糊參數改大，text-shadow: 16px 16px 8px #000，效果如圖，已經看不出投影的文字是什麼了。

（09）最後一個參數，不用解釋，大家應該都知道是代表什麼了，沒錯，就是投影的顏色，可以修改下這個參數，看下效果。text-shadow: 8px 9px 1px #cc0000

（10）除了可以為文字添加一組投影效果外，其實我們在這個樣式裏，是可以為文字添加多組投影效果的，每一組用逗號隔開，代碼如圖。

（11）運行頁面，我們可以看到現在顯示了二個投影，一個在文字上方，一個在文字下方。可以利用這個特性，為文字生成各種更炫的效果。