日期：2012-4-8  來源：GBin1.com

以 往的CSS開發中，如果我們需要給文字添加陰影效果，基本只能將文字做成圖片，而對于CSS3來說，我們只需要添加對應的text-shadow就可以實 現。在今天我們帶給大家的這篇文章中，我們將簡單的介紹CSS3的text-shadow屬性，看看我們能夠制作什么樣的文字特效。希望大家喜歡！

文字陰影CSS3屬性

CSS3文字陰影可以應用于各種頁面上的文字，首先這里我們介紹一下主要的屬性：

• xPosition： 這個屬性定義了水平位置相對于文字本身的位移
• yPosition：和xPosition類似，定義垂直的位移
• blurSize：定義陰影的模糊效果
• color：定義了陰影顏色，支持hex， rgb，rgba，hsl，hsla和顏色名稱

我們可以定義如下的CSS3屬性：

pre.gbin1Text{
  text-shadow: 1px 1px 2px #202020
}

上面CSS定義了一個向右下方移動1個像素的陰影，并且模糊為2個像素。顏色為灰色，效果如下：

GBin1 | 中文互聯 

以上演示中我們看到了不錯的陰影效果。

目前CSS3的text-shadow效果在如下的瀏覽器中被支持：

• Chrome
• Firefox
• Opera
• Mozilla
• IE10

是的，老版本的IE并不支持文字陰影效果。但是如果你在老版本瀏覽器中使用陰影的話，不會有任何影響。只不過你看不到超棒的陰影效果。

....

原文來自:了解CSS3的文字陰影效果 - Text Shadow effects