使用CSS3實(shí)現(xiàn)質(zhì)感陰影文字的方法

　　建站學(xué)院(LieHuo.Net)訊 最近我因?yàn)橐惭bFirebug 1.4導(dǎo)致我不得不安裝了Firefox 3.5，所以很不小心地接觸到了Wordpress后臺(tái)那漂亮的文字陰影。也就是CSS中的text-shadow屬性。所以今天我整理了一些資料，希望可以對(duì)大家有所啟發(fā)。

　　首先我們看看wordpress 2.8后臺(tái)使用了text-shadow的部分(綠色箭頭)。覺得怎么樣？沒錯(cuò)，這些都是CSS3屬性，而不是圖片做成的。

圖1

　　text-shadow是什么?

　　text-shadow早在CSS2中已經(jīng)存在,而現(xiàn)在CSS3也準(zhǔn)備將他加入其中。并且由于一直以來只有Safari支持這個(gè)屬性所以我們很少見到真正的應(yīng)用，直到最近Firefox 3.5對(duì)它的支持然重新喚起了人們對(duì)它的興趣。liehuo.net

　　text-shadow可以支持給文字加上陰影,這樣我們?cè)谠O(shè)計(jì)時(shí)可以利用css3屬性增加文字的質(zhì)感而不用使用任何圖片。目前支持的瀏覽器有Firefox 3.1+,Safari 3+,Opera 9.5+等現(xiàn)代瀏覽器(數(shù)據(jù)可能有偏差)。當(dāng)然IE家族是無法支持的。JZquan.COm

　　接下來看看text-shadow的語法：

　　color：顏色；length分別按順序指“X軸方向長度 Y軸方向長度 陰影模糊半徑”

　　正值在X軸表示向右，負(fù)值表示向左。同樣的道理Y軸負(fù)值是表示向上。其中任意一個(gè)值可以為零也可為空(將做默認(rèn)處理)

　　舉個(gè)例子：

　　表示X軸方向陰影向左1px，Y軸方向陰影向下2px，而陰影模糊半徑3px，顏色為 #ffb69a

一些試驗(yàn)與demo

　　我做了點(diǎn)小小的試驗(yàn)，做成了一個(gè)Demo頁面。為了讓瀏覽器不支持text-shadow的用戶看到陰影效果，請(qǐng)直接看以下截圖(有位朋友說那個(gè)“火鳥”看起來像“雞”)：

圖2

　　如果你使用的是Firefox 3.1+,Safari等瀏覽器,那請(qǐng)直接點(diǎn)Demo演示

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)