使用陰影特效，讓文字更有立體感

有立體感的文字

在不少的網站上，咱們都會發現一些以下圖的文字：

那麼他們是如何實現的呢？答案就是他們使用了CSS3中的新特效text-shadow來製造文字的陰影，而後進行偏移定位從而讓人有立體感；

關於CSS3的新特效：text-shadow

• text-shadow的兼容性 由於CSS3是最新版本的css樣式，而text-shadow又是其中的新樣式之一，那麼咱們在用這個樣式以前確定是要先查看它在各個瀏覽器上的兼容性如何，如下是我在caniuse網站上查到的目前各個瀏覽器對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軸偏移是默認從文字所處的位置進行橫向偏移，容許負值；

②：第二個值是陰影的Y軸偏移，陰影的Y軸偏移是默認從文字所處的位置進行橫向偏移，容許負值；

③：第三個值是文字陰影的粗度，越粗越顯模糊，以下圖：

④：第四個值是文字陰影的顏色：

PS：最後能夠再對字體和字的大小進行一些設置，就能夠達成立體字的效果了；

附錄：關於盒子的陰影特效box-shadow的一些簡介

1.盒子陰影特效與文字陰影樣式不同的是它沒有繼承性；

2.box-shadow也有四個值，與text-shadow一一對應；

3.box-shadow的兼容性報告