CSS3制作文字半透明倒影效果
/*------------------ITEYE 祈祷幸福()原创 转载请注明-----------------*/效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。
html代码如下：
Html代码 <divclass="content"><h3title="专业技能">专业技能</h3><divclass="next"><!--其他内容--></div></div>
有两种实现方式：
1.box-reflect
(属性详情见/ 属性→边框→box-reflect)
Css代码 .contenth3{opacity:0.7;font:40px/50px'Microsoftyahei';-webkit-box-reflect:below5px-webkit-gradient(linear,centertop,centerbottom,from(transparent),color-stop(0.2,transparent),to(white));}
但是box-reflect属性只有chrome/Safari支持（支持详情见/#search=box-reflect）
FF和Opera不能兼容，所以有了以下替代方案。
2.transform属性的scaleY方式：
受到神飞的博文和MDN的一个Demo源代码的启发
MDN Demo/zh-CN/demos/detail/css3-reflection-effect/launch
神飞：一些上流的CSS3图片样式/css3-image-styles.html
Css代码 .contenth3{position:relative;float:left;opacity:0.7;font:40px/50px'Microsoftyahei';}.contenth3:before{content:attr(title);position:absolute;z-index:1;top:100%;left:0;height:100%;width:100%;-webkit-transform:scaleY(-1);}.contenth3:after{content:'';position:absolute;z-index:2;top:100%;left:0;height:100%;width:100%;background:-webkit-gradient(linear,centertop,centerbottom,from(rgba(255,255,255,0)),to(rgba(255,255,255,1)));/*其他几个被省略了-_-!*/}.content.next{clear:both;padding:60px;}
注:前面h3元素浮动是为了让文字块的宽度动态地刚好等同文字宽度，否则块过长，导致after的遮罩延长，影响右边没有文字的部分
/*------------------ITEYE 祈祷幸福()原创 转载请注明-----------------*/
