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

• 2019 年 11 月 12 日
• 筆記

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

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 火焰文字效果