狐狸搞設計

CSS3文字陰影在網頁設計中的應用 

陰影文字和發光文字

一個最簡單的陰影文字是如下這樣寫的，其中 1px 2px 代表陰影相對於文字向右下方向偏移了 1px 2px, 可以為負值；5px 代表陰影的模糊半徑，取值越大，陰影越擴散看不見。最後是陰影顏色。這樣的陰影適合字號比較大的文字。

text-shadow: 1px 2px 3px #777;

text-shadow: 0 0 6px #FF0;

浮雕文字

浮雕文字效果在 Mac OS X 和 iPhone 中隨處可見，由於陰影半徑很小，一般是 0 或 1px, 所以也適合小號的文本。在使用上一般遵循這個原則：深色文字淺色背景，用白陰影，淺色文字深色背景，用黑陰影。

text-shadow: 0 1px 0 #eee; 凹進效果

text-shadow: 0 -1px 0 #000; 凹進效果

text-shadow: 0 -1px 1px #eee; 凸出效果

text-shadow: 0 1px 1px #000; 凸出效果

多重陰影

在上面所列的新版瀏覽器中都已經支持多重陰影，可以達到一些特殊的效果，不過注意，如果文字和背景顏色接近，IE 下就杯具了。

text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;

text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;