跨瀏覽器文本（模糊）shadow

如何獲取跨瀏覽器文本（模糊）陰影？包括IE6,7,8。跨瀏覽器文本（模糊）shadow

有沒有任何CSS或JS解決方案？

我想用語義和有效的標記獲取文本陰影。

來源

2010-03-17 Jitendra Vyas

jQuery Dropshadow plugin可以處理這個。爲了獲得完整的瀏覽器兼容性，你將不得不使用JavaScript，沒有純粹的CSS解決方案。

來源

2010-03-17 15:27:17 GSto

此方法使用定位span來實現外觀。

http://krijnhoetmer.nl/stuff/javascript/text-shadow/

可能有使用變換純的CSS溶液。

使用過濾器：

IE 6支持過濾器，這樣就可以使用：

filter: dropshadow(color=#ffff00,offX=5,offY=5);

所以一個跨瀏覽器的風格可能看起來像：

.my-class 
{ 
    -ms-filter: "dropshadow(color=#ffff00,offX=5,offY=5)"; 
    filter: dropshadow(color=#ffff00,offX=5,offY=5); 
    text-shadow: #ff0 5px 5px; 
}

來源

2010-03-17 15:28:39 Joel

這是_a_解決方案，但即使dropshadow過濾器是如此難以置信的醜陋，我寧願把我的眼睛比使用它。 – aaaidan 2011-07-29 00:26:13

Here is a Codepen demo會告訴你如何創建文字模糊效果以及其他幾種文字效果。

<div id="blurred">BLURRED</div> 

blurred { 
    text-shadow: 0px 0px 10px rgba(255,255,255,0.4), 
    0px 0px 30px rgba(255,255,255,0.6), 
    0px 0px 50px rgba(255,255,255,0.5), 
    0px 0px 180px rgba(255,255,255,0.5); 
    color: rgba(255,255,255,0); 
}

對於舊版本的Internet Explorer版本9，可以追溯到5.5，你可以通過使用IE特定的CSS濾鏡產生模糊效果的屬性，這樣

p { filter:Blur(Direction=45, Strength=8);height:40;width:400;font-size:20pt;font-weight:bold; }

對於較新版本的IE你可以指定他們退回到IE9兼容性這個元值。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

來源

2014-12-09 05:57:07 davidcondrey

跨瀏覽器文本（模糊）shadow

回答

相關問題