有立體感的文字

在很多的網(wǎng)站上，我們都會(huì)發(fā)現(xiàn)一些如下圖的文字：

立體感文字

那么他們是如何實(shí)現(xiàn)的呢？答案就是他們使用了CSS3中的新特效text-shadow來(lái)制造文字的陰影，然后進(jìn)行偏移定位從而讓人有立體感；

關(guān)于CSS3的新特效：text-shadow

• text-shadow的兼容性
  因?yàn)镃SS3是最新版本的css樣式，而text-shadow又是其中的新樣式之一，那么我們?cè)谟眠@個(gè)樣式之前肯定是要先查看它在各個(gè)瀏覽器上的兼容性如何，以下是我在caniuse網(wǎng)站上查到的目前各個(gè)瀏覽器對(duì)text-shadow的兼容性報(bào)告：

text-shadow的兼容性

可見(jiàn)除IE10以下版本的IE瀏覽器，目前的主流瀏覽器如chrome，F(xiàn)irefox，Safari等都對(duì)其支持，所以我們是可以放心使用的；

• text-shadow的用法
  1.text-shadow是直接作用在文字上的，并且具有繼承性，可以從下圖看出：

具有繼承性

2.text-shadow有四個(gè)值，如上圖的：text-shadow: 1px 1px 1px rgba(0,0,0,0.5);，從左到右對(duì)這些值進(jìn)行解析可以得知：
①：第一個(gè)值是陰影的X軸偏移，陰影的X軸偏移是默認(rèn)從文字所處的位置進(jìn)行橫向偏移，允許負(fù)值；

文字陰影的X軸偏移

②：第二個(gè)值是陰影的Y軸偏移，陰影的Y軸偏移是默認(rèn)從文字所處的位置進(jìn)行橫向偏移，允許負(fù)值；

文字陰影的Y軸偏移

③：第三個(gè)值是文字陰影的粗度，越粗越顯模糊，如下圖：

文字陰影的粗度

④：第四個(gè)值是文字陰影的顏色：

文字陰影的顏色

PS：最后可以再對(duì)字體和字的大小進(jìn)行一些設(shè)置，就可以達(dá)成立體字的效果了；

附錄：關(guān)于盒子的陰影特效box-shadow的一些簡(jiǎn)介

1.盒子陰影特效與文字陰影樣式不一樣的是它沒(méi)有繼承性；

盒子陰影特效沒(méi)有繼承性

2.box-shadow也有四個(gè)值，與text-shadow一一對(duì)應(yīng)；

3.box-shadow的兼容性報(bào)告

盒子陰影特效的兼容性