<style>#ft{width:950px;margin-left:auto;margin-right:auto;}

#ft{clear:both;overflow:hidden;padding:10px 0 20px;background-color:#ccc;color:#2C6288;font-size:12px;font-family:tahoma;text-shadow: 1px 1px 0 #FFF}

#ft a{color:#2C6288;}

#ft a:hover{color: #903;text-shadow:1px 1px 0 #FFF;}#ft b{font-weight:400;font-family:\5b8b\4f53;}

#ft .tip{padding-left:2em;color:#666;}

.reflect{margin-bottom:20px;-webkit-box-reflect: below 3px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(rgba(255, 255, 255, 0.9)));}

.fr{float:right;}</style>

html代码

<footer id="ft">
<div>
<a href="javascript:scroll(0,0)">顶部↑</a>
<p>&copy; 2010  <a href="#">文章 RSS</a> | <a href="#">评论 RSS</a> | <a href="#">SiteMap</a> | Powered by <a href="#">Typecho)))</a> & Theme by [<a href="#">K</a>] <b>使用chrome/safari, firefox, oprea浏览可体验最佳效果.</b></p>
</div>
</footer>

效果如图：

来自 http://blog.sina.com.cn/s/blog_583b909e0100q5vb.html



 

纯CSS实现的文字倒影特效

来自 http://www.daimajiayuan.com/sitejs-7883-1.html

CSS3制作文字半透明倒影效果

 

/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/

 

效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。 

html代码如下： 

Html代码  

1. <div class="content">  
2. <h3 title="专业技能">专业技能</h3>  
3. <div class="next"><!--其他内容--></div>  
4. </div>  

有两种实现方式： 

1.box-reflect 
(属性详情见http://css.doyoe.com/  属性→边框→box-reflect) 

Css代码  

1. .content h3{  
2.     opacity:0.7;  
3.     font:40px/50px 'Microsoft yahei';  
4.     -webkit-box-reflect: below 5px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.2, transparent), to(white));  
5. }   

但是box-reflect属性只有chrome/Safari支持（支持详情见 http://caniuse.com/#search=box-reflect） 
FF和Opera不能兼容，所以有了以下替代方案。 



2.transform属性的scaleY方式： 

受到神飞的博文和MDN的一个Demo源代码的启发 
MDN Demo  https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch 
神飞：一些上流的CSS3图片样式   http://www.qianduan.net/css3-image-styles.html 

Css代码  

1. .content h3{  
2.     position:relative;  
3.     float:left;  
4.     opacity:0.7;  
5.     font:40px/50px 'Microsoft yahei';  
6. }   
7.   
8. .content h3:before{  
9.     content:attr(title);  
10.     position:absolute;  
11.     z-index:1;  
12.     top:100%;  
13.     left:0;  
14.     height:100%;  
15.     width:100%;  
16.     -webkit-transform:scaleY(-1);  
17. }  
18.   
19. .content h3:after{  
20.     content:'';  
21.     position:absolute;  
22.     z-index:2;  
23.     top:100%;  
24.     left:0;  
25.     height:100%;  
26.     width:100%;  
27.     background:-webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));/*其他几个被省略了-_-!*/  
28. }  
29.   
30. .content .next{  
31.     clear:both;  
32.     padding:60px;  
33. }  

注:前面h3元素浮动是为了让文字块的宽度动态地刚好等同文字宽度，否则块过长，导致after的遮罩延长，影响右边没有文字的部分 

/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/

来自  http://qidaoxingfu.iteye.com/blog/1387846