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

效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。html代码如下：

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

有两种实现方式：1.box-reflect(属性详情见http://css.doyoe.com/ 属性→边框→box-reflect)

1. .contenth3{
2. opacity:0.7;
3. font:40px/50px'Microsoftyahei';
4. -webkit-box-reflect:below5px-webkit-gradient(linear,centertop,centerbottom,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 Demohttps://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch神飞：一些上流的CSS3图片样式http://www.qianduan.net/css3-image-styles.html

1. .contenth3{
2. position:relative;
3. float:left;
4. opacity:0.7;
5. font:40px/50px'Microsoftyahei';
6. }
8. .contenth3: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. }
19. .contenth3: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,centertop,centerbottom,from(rgba(255,255,255,0)),to(rgba(255,255,255,1)));/*其他几个被省略了-_-!*/
28. }
30. .content.next{
31. clear:both;
32. padding:60px;
33. }

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