有立體感的文字
在很多的網站上，我們都會發現一些如下圖的文字：
立體感文字
那么他們是如何實現的呢？答案就是他們使用了CSS3中的新特效text-shadow來制造文字的陰影，然后進行偏移定位從而讓人有立體感；
關于CSS3的新特效：text-shadow
-
text-shadow的兼容性
因為CSS3是最新版本的css樣式，而text-shadow又是其中的新樣式之一，那么我們在用這個樣式之前肯定是要先查看它在各個瀏覽器上的兼容性如何，以下是我在caniuse網站上查到的目前各個瀏覽器對text-shadow的兼容性報告：
text-shadow的兼容性
可見除IE10以下版本的IE瀏覽器，目前的主流瀏覽器如chrome，Firefox，Safari等都對其支持，所以我們是可以放心使用的；
-
text-shadow的用法
1.text-shadow是直接作用在文字上的，并且具有繼承性，可以從下圖看出：
具有繼承性
2.text-shadow有四個值，如上圖的：text-shadow: 1px 1px 1px rgba(0,0,0,0.5);，從左到右對這些值進行解析可以得知：
①：第一個值是陰影的X軸偏移，陰影的X軸偏移是默認從文字所處的位置進行橫向偏移，允許負值；
文字陰影的X軸偏移
②：第二個值是陰影的Y軸偏移，陰影的Y軸偏移是默認從文字所處的位置進行橫向偏移，允許負值；
文字陰影的Y軸偏移
③：第三個值是文字陰影的粗度，越粗越顯模糊，如下圖：
文字陰影的粗度
④：第四個值是文字陰影的顏色：
文字陰影的顏色
PS：最后可以再對字體和字的大小進行一些設置，就可以達成立體字的效果了；
附錄：關于盒子的陰影特效box-shadow的一些簡介
1.盒子陰影特效與文字陰影樣式不一樣的是它沒有繼承性；
盒子陰影特效沒有繼承性
2.box-shadow也有四個值，與text-shadow一一對應；
3.box-shadow的兼容性報告
盒子陰影特效的兼容性
