IE下的文字阴影

LMS
折腾
1.4K+ 4

CSS3出来的时候，我第一认识的属性是text-shadow，也就是文字阴影，给文字来点影子看着有立体感，而且更醒目。不过这个属性和许多其他的CSS3特有属性一样，在ie下是无效的，刚才不小心发现了，原来在ie下也是可以让文字有阴影的，只是要有ie特有的filter这个东西，好像叫滤镜的。

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> Text shadow </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
  body{background:#000;}
  #gaga{position:absolute;
  text-shadow: white 1px 0 0,white 0 1px 0,white -1px 0 0,white 0 -1px 0;
  filter: Dropshadow(offx=1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=1,color=#ffffff) Dropshadow(offx=0,offy=-1,color=#ffffff) Dropshadow(offx=-1,offy=0,color=#ffffff);}
  </style>
 </HEAD>

 <BODY>
  <div id="gaga">看看ie下有没有阴影。</div>
 </BODY>
</HTML>

运行上面的代码，在各种浏览器下，页面上的文字都会有阴影了。css内的position:absolute;是必须的，没有这句，ie下就没阴影。后面的阴影是设置环绕的阴影，所以有四个Dropshadow，你可以任意删除其中的1到3个。

话说回来，对于无视ie的，本功能纯属鸡肋。

THE END

评论 4

  1. 支付宝说是支持，但是貌似还是不好使！！！很少使用支付宝！！！

    1. 我用chrome装了好几次的控件，一点用都没有，看来是不支持。

  2. 只有在用网银的时候在用下IE，一般都是chrome！！！IE是该落幕了

    1. 好像支付宝也不支持chrome啊，是不是？

发表评论

Submit