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

在HTML開發里，有時為了突出顯示效果，需要為一些標題文字添加投影效果。要實現這個效果，在以前的做法里，就是需要圖片來完成，先用PS做一些有投影效果的文字，然后再放在html里顯示出來。這樣就太麻煩了，修改文字后，還需要重新做新的圖片。<br/>現在我們可以利用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
運行頁面，我們可以看到現在顯示了二個投影，一個在文字上方，一個在文字下方。可以利用這個特性，為文字生成各種更炫的效果。
End

發表于 2017-10-23 00:00
閱讀 ( 1117 )
分類：電腦網絡

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

操作方法

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章