IT兄弟連 HTML5教程 CSS3屬性特效 文字陰影

 

文字陰影是能夠疊加的。最基本能夠給出四個值，用法以下：

text-shadow：x y blur color

文字陰影的參數說明如表1所示。

表1  CSS3文字陰影參數說明

 

 

橫向偏移量和縱向偏移量能夠爲負值，表明文字陰影向左偏移或向上偏移。文字陰影是能夠疊加的，可是加不少層，會影響頁面加載速度。添加多層陰影用「，」隔開。陰影疊加是先渲染前面的，再渲染後面的。

1．最簡單的用法

text-shadow:2px 2px 4px #000;

此語法說明爲一段文字設定橫向偏移量爲2px，縱向偏移量爲2px，模糊距離爲4px的黑色陰影。如下是一個單層陰影的例子。代碼以下：

 

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，如圖1所示：

圖1  文字單層陰影

 

2．陰影疊加

text-shadow:2px 2px 0px red，2px 2px 4px green;

此語法說明爲一段文字設定雙層陰影。第一層爲橫向偏移量爲2px，縱向偏移量爲2px，模糊距離爲0的紅色陰影，第二層爲橫向偏移量爲2px，縱向偏移量爲2px，模糊距離爲4px的綠色陰影。對於多層陰影，瀏覽器先渲染前面的陰影，再渲染後面的陰影。如下是一個雙層陰影的例子。代碼以下：

 

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，段落文字被加上了兩層陰影，如圖2所示。

圖2 文字雙層陰影

 

3．幾個有趣的例子

（1）層疊：

將這段代碼寫在段落樣式表中後在瀏覽器中運行，咱們就能夠看到藍色層疊的文字效果，如圖3所示。

圖3  文字層疊效果

 

（2）光暈：

將這段代碼寫在段落樣式表中後在瀏覽器中運行，咱們就能夠看到藍色光暈的文字效果，如圖4所示。

圖4  文字光暈效果

 

（3）火焰文字：

 

將這段代碼寫在段落樣式表中後在瀏覽器中運行，咱們就能夠看到藍色光暈的文字效果，如圖5所示。

圖5  火焰文字效果