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

CSS3制作文字半透明倒影效果效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。html代码如下：

Html代码<divclass="content"><h3title="专业技能">专业技能</h3><divclass="next"><!--其他内容--></div></div>有两种实现方式：1.box-reflect(属性详情见http://css.doyoe.com/ 属性→边框→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支持（支持详情见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

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的遮罩延长，影响右边没有文字的部分