CSS實現文字浮雕效果，文字陰影效果

利用CSS text-shadow 屬性支持 text-shadow 的瀏覽器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就能夠的，但直到 4.0 才支持多重陰影。另外 Opera mini 也能顯示，但比較弱，陰影不能模糊。

浮雕文字

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

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

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

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

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

陰影文字和發光文字

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

text-shadow: 1px 2px 5px #888;

text-shadow: 0 0 10px #fd8;

多重陰影

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

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

text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;

text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;

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;

半透明陰影顏色

有時候須要作的陰影不想它模糊半徑太大，又不能太黑，因而從黑色改成灰色──問題來了，灰色的陰影在深色背景上很難看。

text-shadow: 1px 2px 3px #888; 杯具了

這時候要用到 rgba 顏色，在紅綠藍以外還有第四個值 alpha 通道，取值在 0~1 之間。下面的陰影是黑色，可是半透明瞭。半透明陰影的適應性明顯更強，在模糊半徑很小的時候，也能透出底下的背景色來。

text-shadow: 1px 2px 3px rgba(0,0,0,0.5);

淘寶網購物