Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS3的text-shadow在IE上的实现

  之前的文章中说了box-shadow在IE中的实现方式,其实这个text-shadow也是差不多的。IE的shadow滤镜效果太差,简直就是一个线性渐变,完全没感觉,所以我抛弃了它。一般低版本IE中实现投影都是用Blur滤镜来做的(IE9也可以用Blur来实现)。但是Blur会把里面的所有东西都模糊了
<style>
div {
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3);
  font:32px/54px 微软雅黑;zoom:1;
}
</style>
<div>
  最新科学研究表明<br/>
  撸管过度会导致视力模糊
</div>

  看吧,撸多了就这样。使用Blur的方法需要另外一个元素来显示正常的文字。之前实现box-shadow也是这么实现的,但是那时候我直接丢出了JS代码。看到那么长的代码,有些人可能会觉得那个效果的实现很复杂。其实很简单的,现在就不用JS来实现一个。 <style>
.panel {position:relative;font:22px/32px 微软雅黑;}
.text {
  position:absolute;top:0px;left:0px;
  text-shadow:0px 0px 6px #666;
}
.shadow {
  position:absolute;top:-4px;left:-4px;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=4);
  color:#666;
}
</style>
<div class="panel">
  <div class="text">次碳酸钴's Blog</div>
  <!--[if IE]>
  <div class="shadow">次碳酸钴's Blog</div>
  <![endif]-->
</div>

  这个代码中使用了IE的预处理命令来兼容,只有IE才能看懂那个命令,其它浏览器当作注释解释。所以这样写就可以了。如果只有一段文字需要使用这个效果这样写是最简单的。但是如果有很多文字都需要加投影效果,那就建议写成JS来自动生成投影了。代码可以参考实现box-shadow的那篇文章的代码,其实都是大同小异的。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^