文字陰影效果 text-shadow

前幾天在做佈景主題的時候，想起了 text-shadow 這個樣式。早年該樣式好像只有 Safari 瀏覽器支援，所以其實用性不大或者說是根本沒有實用性也不為過。一時心血來潮，想再弄弄看，沒想到現在的 Firefox3.5 與 Opera10 通通有支援(不曉得從那個版本開始支援)，至於 Safari4 那就更不用說囉。

當然啦，要提高這個文字陰影樣式的實用性，還是需看 IE 是否支援，畢竟目前使用 IE 的朋友還是非常多。但結果依然令人扼腕，IE8 並不支援，所幸我們可以使用 IE 專有的靜態濾鏡(Static Filters) – Shadow (需存取 ActiveX 控制)來搭配使用 text-shadow 樣式。

如此一來，四大核心瀏覽器就都通通支援了。

h1#sh1, h1#sh2 {
	text-shadow: #000000 2px 2px 1.8px;
	filter: progid:DXImageTransform.Microsoft.Shadow (
	color="#000000", strength="3", direction="135");
	}

上述圖中：

text-shadow: #000000 2px 2px 1.8px;

• text-shadow 表示樣式名稱。
• 第一個 2px 表示水平(X 軸)位移，正值代表陰影往右移動，負值則是向左移動。
• 第二個 2px 表示垂直(Y 軸)位移，正值代表陰影往下移動，負值則是向上移動。
• 1.8px 表示柔焦的光暈半徑。

filter: progid:DXImageTransform.Microsoft.Shadow (表示啟用 IE 的 Shadow 濾鏡。)

direction 表示偏移的方向(角度)，其值有 0、45、90、135、180、225、270、315。

IE 濾鏡的啟用

在 IE5.5 之後的版本，它必須使用

filter: progid:DXImageTransform.Microsoft.濾鏡名稱

來作為啟動濾鏡介面的程式碼；它與之前的

filter:濾鏡名稱

是不一樣的也不相容，顯示的結果也些微不同。這是因為 IE5.5 之後是採用 DirectX 來處理繪圖效果，之前則是使用瀏覽器來處理的。

這是 Safari4

這是 IE8

文章分類