IE下的文字阴影

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的,本功能纯属鸡肋。

作者: LMS

天行贱,君子自强自息。

标签

《IE下的文字阴影》有4个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注