CSS3-了解文字陰影

2020-03-24 18:17:53

字體：大中小

供稿：網(wǎng)友

最近我因?yàn)橐惭b Firebug 1.4 導(dǎo)致我不得不安裝了 Firefox 3.5 ,所以很不小心地接觸到了Wordpress后臺(tái)那漂亮的文字陰影.也就是CSS中的text-shadow屬性.所以今天我整理了一些資料,希望可以對(duì)大家有所啟發(fā).首先我們看看wordpress 2.8后臺(tái)使用了text-shadow的部分(綠色箭頭).覺得怎么樣?沒錯(cuò),這些都是CSS3屬性,而不是圖片做成的.text-shadow是什么?text-shadow早在CSS2中已經(jīng)存在,而現(xiàn)在CSS3也準(zhǔn)備將他加入其中.并且由于一直以來只有Safari支持這個(gè)屬性所以我們很少見到真正的應(yīng)用,直到最近Firefox 3.5對(duì)它的支持然重新喚起了人們對(duì)它的興趣.text-shadow可以支持給文字加上陰影,這樣我們?cè)谠O(shè)計(jì)時(shí)可以利用css3屬性增加文字的質(zhì)感而不用使用任何圖片.
目前支持的瀏覽器有Firefox 3.1+,Safari 3+,Opera 9.5+等現(xiàn)代瀏覽器(數(shù)據(jù)可能有偏差).當(dāng)然IE家族是無法支持的.接下來看看text-shadow的語法:text-shadow:color length length length;color:顏色; length分別按順序指“X軸方向長度 Y軸方向長度陰影模糊半徑”
正值在X軸表示向右,負(fù)值表示向左.同樣的道理Y軸負(fù)值是表示向上.其中任意一個(gè)值可以為零也可為空(將做默認(rèn)處理)舉個(gè)例子:text-shadow: -1px 2px 3px #ffb69a;表示X軸方向陰影向左1px,Y軸方向陰影向下2px,而陰影模糊半徑3px,顏色為 #ffb69a一些試驗(yàn)與demo我做了點(diǎn)小小的試驗(yàn),做成了一個(gè) Demo頁面 .為了讓瀏覽器不支持text-shadow的用戶看到陰影效果,請(qǐng)直接看以下截圖(有位朋友說那個(gè)”火鳥”看起來像”雞”):如果你使用的是Firefox 3.1+,Safari等瀏覽器,那請(qǐng)直接點(diǎn) Demo演示為什么使用text-shadow：可以增強(qiáng)文字質(zhì)感可以減少圖片的使用,減少帶寬支出隨著Firefox 3.5支持text-shadow,不久很多人將可以看到你定義的陰影不相信?請(qǐng)看看下面的截圖,這是對(duì)http://tweetcc.com/網(wǎng)站分別在safari 4(win)與Firefox 3.0.11下所進(jìn)行的截圖.很明顯在有text-shadow應(yīng)用下整體文字層次感好了許多.其他例子接下來我們繼續(xù)看看一些有趣的text-shadow下的例子吧,首先看看 vikiworks 用text-shadow來顯示html' target='_blank'>程序代碼.很多人都覺得這個(gè)效果很贊,沒錯(cuò),該網(wǎng)站用的就是css3屬性.參考資料及常見問題看完上面覺得不夠,那么可以參考一下下面的文章：http://www.css3.info/preview/text-shadow/ http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows http://www.quirksmode.org/css/textshadow.html 問題有:如果使用了blur,也就是定義了陰影模糊半徑,會(huì)導(dǎo)致頁面在滾動(dòng)時(shí)變慢.html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：關(guān)于CSS HACK 解決兼容的寫法

下一篇：精通 CSS 濾鏡（四）