那麼本篇文章繼續給大家介紹css3怎麼製作文字陰影製作效果，也就是說如何做3d字型，這裡主要需要掌握的屬性就是text-shadow樣式屬性，有的小白或許會問text-shadow是啥？什麼意思？怎麼使用？各位莫急，下面我們就通過具體的範例程式碼進行詳細解說。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css3 text-shadow屬性使用樣本</title> <style> .t1{ text-shadow: 5px 5px 5px #029789; font-size: 40px; font-weight: bold; color: white; } .t2{ text-shadow: -5px -5px 5px #1094f2; font-size: 40px; font-weight: bold; color: white; } </style></head><body><div class="demo"> <p class="t1">text-shadow屬性使用樣本1-文字陰影製作效果</p> <p class="t2">text-shadow屬性使用樣本2-文字陰影製作效果</p></div></body></html>
上述代碼，我們通過瀏覽器訪問，效果如下：
這樣看是不是字型已經有了立體感呢？那麼大家有沒有發現樣本1和樣本2的不同處有哪些？其實顯而易見，樣本1中的文字陰影部分是在文字的右下方！而樣本2中的字型陰影是在文字的左上方！
這些效果都是因為css3中text-shadow樣式屬性！我們可以發現樣本1中text-shadow的值分別是5px 5px 5px #029789;樣本2中的值分別是-5px -5px 5px #1094f2;這四個值分別表示，x軸方向的位移量、y軸的位移量、模糊值、陰影顏色。那麼導致陰影位置的不同是因為前兩個值的正負數值原因。
x軸為正值則表示往右位移，為負值則往左，y軸為正值則表示往下位移，為負值則往上，模糊值越大就越模糊。
那麼瞭解了這些值的所屬含義，就能根據自己的喜好，隨意改變文字陰影製作效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
