IE9中的css3 text-shadow

Question

是否有一種簡單的方法讓css3 text-shadow在IE9中運行？ 至少一個文本陰影會很棒。 我想理想情況下也支持IE8。 我希望有一個簡單的jquery插件或.htc文件，它只是查看元素的text-shadow css屬性並為IE9實現它。

Answer 1

是的，但不是你想象的那樣。 根據caniuse （非常好的資源），沒有支持，也沒有可用於向IE9添加text-shadow支持的polyfill。 但是， IE有自己的專有文本陰影（ 詳見此處 ）。

示例實現，取自他們的網站（在IE5.5到IE9中工作）：

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

對於跨瀏覽器兼容性和面向未來的代碼，請記住還要使用CSS3標准的text-shadow屬性（ 在此處詳述 ）。 考慮到IE10已經正式宣布放棄對傳統dx過濾器的支持，這一點尤為重要。 展望未來，IE10 +僅支持CSS3標准text-shadow 。

Answer 2

由於IE9不支持CSS3 text-shadow ，我只會使用IE的filter屬性。 實例： http ： //jsfiddle.net/dmM2S/

text-shadow:1px 1px 1px red; /* CSS3 */

可以替換為

filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/

你可以得到非常相似的結果。

Answer 3

試試CSS Generator 。

您可以選擇值並在線查看結果。 然后你得到剪貼板中的代碼。
這是生成代碼的一個示例：

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);

Answer 4

我正在尋找一種跨瀏覽器的文本筆划解決方案，當覆蓋在背景圖像上時可以正常工作。 我認為我有一個解決方案，不涉及額外的標記，js和IE7-9中的工作（我沒有測試過6），並且不會導致別名問題。

這是使用CSS3 text-shadow的組合，除了IE（ http://caniuse.com/#search=text-shadow ）之外，它有很好的支持，然后使用IE的過濾器組合。 CSS3文本筆划支持目前很差。

IE過濾器

發光濾鏡（ http://www.impressivewebs.com/css3-text-shadow-ie/ ）看起來很糟糕，所以我沒有使用它。

David Hewitt的答案涉及在方向組合中添加陰影濾鏡。 然后遺憾地刪除了ClearType，因此我們最終得到了錯誤的別名文本。

然后我將useragentman上建議的一些元素與dropshadow過濾器結合起來。

把它放在一起

此示例為帶有白色筆划的黑色文本。 我正在使用條件html類來定位IE（ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ）。

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Answer 5

我嘗試了上面引用的過濾器，並強烈反對它創建的效果。 我也不想使用任何插件，因為它們會減慢加載時間，看起來像這樣的基本效果。

在我的情況下，我正在尋找具有0px模糊的文本陰影，這意味着陰影是文本的精確復制品，但只是偏移和后面。 使用jquery可以輕松地重新創建此效果。

<script>
    var shadowText = $(".ie9 .normalText").html();  
    $(".ie9 .normalText").before('<div class="shadow">' + shadowText + '</div>');
</script>
<style>
    .ie9 .shadow { position: relative; top: 2px; left: -3px; }
</style>

這將創建與下面的css3文本陰影相同的效果。

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

這是一個有效的例子（見主橫幅圖片上的大白文） http://www.cb.restaurantconnectinc.com/

Answer 6

crdunst的答案非常簡潔，我找到了最好看的答案，但沒有解釋如何使用，代碼比需要的大。

您需要的唯一代碼：

#element {
    background-color: #cacbcf;
    text-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
    filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);
}

首先你必須指定一個background-color - 如果你的元素應該是透明的，只需復制父顏色的背景顏色或讓它繼承。 色度過濾器的顏色必須與背景顏色匹配，以修復文本周圍的這些偽影（但是在這里你必須復制顏色，你不能寫inherit ）。 請注意，我沒有縮短投影過濾器 - 它可以工作，但陰影會被切割為元素尺寸（大陰影會很明顯;嘗試將偏移設置為至少4）。

提示：如果要使用透明度（alpha通道）的顏色寫入#AARRGGBB表示法 ，其中AA代表不透明度的十六進制值 - 從01到FE，因為FF和具有諷刺意味的是00也表示沒有透明度，因此沒用.. ^^只是比rgba表示法低一點，因為陰影不柔和，相同的alpha值會顯得更暗。 ;）

一個很好的代碼片段來轉換IE的alpha值（JavaScript，只需粘貼到控制台）：

var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);

問題：文本/字體在應用陰影后的行為類似於圖像; 放大后它會變得像素化和模糊......但這是IE的問題，而不是我的問題。

這里的影子現場演示： http ： //jsfiddle.net/12khvfru/2/