IE10下的Text-Shadow
顧名思義，text-shadow是個css屬性，用於在文本下面畫陰影。看一個小例子吧：
應用此功能，可以將文本加強顯示，增加立體感。某些場景下，尤其是背景有顏色或是圖片，text-shadow可用來增加對比以提高可讀性。作爲我們的承諾，目前爲止我們已經向CSS3文本測試套件提交了10個測試用例，通過率是9/10。
左邊IE9，郵編IE10，兩者有微妙的不一樣
左邊ie9，右邊ie10
像text-shadow規範中說的，IE10對box-shadow和text-shadow中的<shadow>提供的定義是相同的，只是在text-shadow中不支持“inset”關鍵字。text-shadow中需要定義5個參數：顏色，X座標，Y座標，模糊半徑（blur radius）和傳播距離（spread distance，文章的後面有詳細介紹）。目前只有IE10支持spread distance。如何用Text-Shadow
最基本的text-shadow只需要x座標和y座標
.shadow1 { color: black; text-shadow: 2px 2px; }
很多時候，您可能會制定陰影的顏色
.shadow2 { color: black; text-shadow: #87CEEB 1px 3px; }
顏色參數放在shadow的前面或是後面都可以。還可以增加blur radius屬性，它通過高斯模糊算法描述陰影模糊的量值。
.shadow3 { color: black; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); }
當然還可以制定spread distance。正數表示引用向外發散的像素值，負數表示陰影向內收縮的像素值。
.shadow4 { color: black; text-shadow: skyblue 0px 0px 0px 4px; }
如果照葫蘆畫瓢，spread正數值被模仿的寫成0，陰影效果就有問題了，實現這種效果會相當複雜，可能會導致性能下降，引用效果的質量也會變低。
.shadow4_nospread { color: black; text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; }
上面的這種效果如果採用spread實現就簡單多了。
.shadow5 { text-shadow: 5px 5px 2px -2px #9966CC; }
上面列舉到的5個參數只是描述了一種樣式的陰影。text-shadow支持很多中陰影類型。陰影可以分爲好幾層，從前到後，都有不同的表示。
下面這個例子最底下層是個紅色陰影，之上是橙色陰影，再往上是個黃色的，最頂上是個部分透明的白色陰影。
.shadow6 { text-shadow: rgba(255, 255, 255, .5) 1px 1px, yellow 2px 3px, rgba(255, 153, 0, .7) 3px 6px, rgba(255, 0, 0, .5) 4px 8px; }
“spread”參數和互操作性
目前，只有IE10支持spread distance屬性，原因請參考W3C規範。規範中對text-shadow的各個屬性有較詳細的介紹。
如果以互操作性作爲目標，請牢記，擁有spread的text-shadow在其他不支持的瀏覽器上面會被無效解析。
所以得做好兩手準備，兼容不同的瀏覽器，即使瀏覽器不支持spread，也可以正常展示text-shadow。
.shadow7 {
color: black;
text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread distance */
text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with the full spec */
}
spread可以產生很多效果。我們歡迎您反饋關於“spread distance”的問題，我們會與CSS工作組一起明晰此規範。
在過去的基礎上修改
老版本的ie瀏覽器上有專門用於產生陰影的屬性，比如 DXImageTransform.Microsoft.Shadow,DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow, 和DXImageTransform.Microsoft.Blur。現在ie10上全部都用text-shadow實現。不僅僅是因爲text-shadow是符合標準的，硬件加速對其性能的提升也是很顯著的。
瀏覽器兼容
如果瀏覽器不支持text-shadow，網站需要提供降級服務。
現在的網站，text-shadow還是很輕量級的裝飾。不過text-shadow也可以實現出很炫的展示效果。
如果你想做好不支持text-shadow的瀏覽器兼容，需要用CSSOM的textShadow進行檢測。
if (typeof document.body.style.textShadow == 'undefined') {
// text-shadow is not supported
document.body.style.color = 'black';
}
else {
// text-shadow is supported
document.body.style.color = '#FFFFCC';
document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}嘗試一下text-shadow
使用多個陰影和調整不同的參數，可以創造出一些有趣的效果
以下是我的幾個有趣簡單的實例
你現在可以將text-shadow、WOFF字體和輸入元素在CSS3中結合起來顯現轉換和動畫（CSS3 Transitions and Animations）。
如果你的瀏覽器支持CSS3 Transitions and Animations以及text-shadow，看看這個例子吧。也看看其源代碼是怎麼寫的。
趕緊在IE10下面嘗試一下text-shadow去發揮你的創意吧。IE Test Drive下有個demon：Hands On: text-shadow ，可以通過手工改變參數來展示不同的效果。
—Jennifer Yu, Program Manager, Internet Explorer
原文地址：http://blogs.msdn.com/b/ie/archive/2011/09/29/css3-text-shadow-in-ie10.aspx 2011-9-30