兼容所有浏览器的文字阴影

文字阴影在借助CSS3下非常容易实现，但是问题是IE8以及他的小弟弟们都不会此功能。今天抽空在做ajaxPaled的首页封面时，看到QQ阅读器的封面上的标题文字是带阴影的。我最初以为是CSS3，可后来发现居然IE下也有阴影。看了下源码，发现了秘密——

其实就是使用绝对定位重叠放置两种不同颜色的文字

如上图，两个div容器，其中的内容一模一样。然后根据class值来定义css样式，使用绝对定位(absolute)

   1: .classname, .classname1 {

   2:     color:#333;

   3:     font-size:20px;

   4:     font-weight:bold;

   5:     height:26px;

   6:     left:3px;

   7:     line-height:26px;

   8:     margin-right:7px;

   9:     overflow:hidden;

  10:     padding:5px 8px 0;

  11:     position:absolute;

  12:     top:3px

  13: }

  14: .classname1{

  15:     color:#fff;

  16:     left:2px;

  17: }

看到了吧，重点就是对classname1的位置的重新定义：classname1颜色定义为白色，而classname的颜色还是黑色，但是由于classname1的左边距少了1px，所以会造成两个文字重叠但稍微错开一些，就会形成阴影效果了。

如果你想要阴影向左，那么就使classname1的左边距大上1px即可，如

   1: .classname1{

   2:     color:#fff;

   3:     left:4px;

   4: }

但是注意，如果你想要熟练应用这个，需要熟悉绝对定位、相对定位以及他们之间的相互影响，否则滥用定位会造成页面一些严重错位。

最后，欢迎围观新上线的封面式首页{

每个封面下部的文字是当前分类下的最新一篇文章的标题。

封面图片当然就是相应分类下的最新一篇文章里的图片啦。

}