文字陰影效果 text-shadow
文字陰影效果 text-shadow
前幾天在做佈景主題的時候，想起了 text-shadow 這個 CSS 樣式(早已從標準的 CSS2.1 中剔除)。早年該樣式好像只有 Safari 瀏覽器支援，所以其實用性不大或者說是根本沒有實用性也不為過。一時心血來潮，想再弄弄看，沒想到現在的 Firefox 3.5 與 Opera 10 通通有支援(不曉得從那個版本開始支援)，至於 Safari 4 那就更不用說囉。
當然啦，要提高這個文字陰影樣式的實用性，還是需看 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 來處理繪圖效果，之前則是使用瀏覽器來處理的。
這是 Safari 4 |
這是 IE 8 |
