【css】文字陰影應用

在逛別人網站時應該常常會看到在文章標語加上"文字陰影"，適當的陰影位置及陰影暈開程度能使文字有效的提升讀者注意力，也為網站增添幾分美感。

若以css來表示文字陰影的方式也十分簡單，僅需短短一行字就能製造出漂亮的文字陰影效果，且不受超連結影響，照樣能做出美觀的陰影字。

 

語法:

text-shadow:1px  1px  1px  #000000;

解釋:

 

text-shadow

照字面翻譯的意思就是"文字影子"，也就只需這短短一行以及後面的參數即可塑造出陰影效果。

 

1px  1px  1px

px這個單位就是指"像素"，為長度單位。

其中三個1px分別是定義"陰影距離文字最左方多少px、陰影距離文字最上方多少px、陰影的暈開程度"。

 

#000000;

此則是定義該文字陰影的顏色，建議若文字為黑色，陰影則選用灰色系(#999999)會較為美觀。

(色碼表參考:http://rhinejo.myweb.hinet.net/home/color/color-cord.html)

 

都將語法改換成自己所要的規格後即可將它放置於欲增加文字陰影的文字css內。

(放置於body{}內會使網站所有區域的文字皆改變。)

EX:

text-shadow:6px  6px  3px  #999999;

text-shadow:6px  6px  20px  #999999;

***IE可能無法顯示文字陰影效果***