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

[align=center]/*------------------ITEYE 祈祷幸福([url]http://qidaoxingfu.iteye.com[/url])原创 转载请注明-----------------*/[/align]


[img]http://dl.iteye.com/upload/attachment/0062/5413/1876f794-903e-3866-b1e0-493f3756fe62.jpg[/img]

效果如图。Ps、[color=red]背景线条是背景图勒，和本文效果无关[/color]。。。

html代码如下：

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

有两种实现方式：

[size=large][b]1.box-reflect[/b][/size]
(属性详情见[url]http://css.doyoe.com/[/url] 属性→边框→box-reflect)

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

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


[size=large][b]2.transform属性的scaleY方式：[/b][/size]

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

.content h3{
    position:relative;
    float:left;
    opacity:0.7;
    font:40px/50px 'Microsoft yahei';
} 

.content h3:before{
    content:attr(title);
    position:absolute;
    z-index:1;
    top:100%;
    left:0;
    height:100%;
    width:100%;
    -webkit-transform:scaleY(-1);
}

.content h3:after{
    content:'';
    position:absolute;
    z-index:2;
    top:100%;
    left:0;
    height:100%;
    width:100%;
    background:-webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));/*其他几个被省略了-_-!*/
}

.content .next{
    clear:both;
    padding:60px;
}

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

[align=center]
/*------------------ITEYE 祈祷幸福([url]http://qidaoxingfu.iteye.com[/url])原创 转载请注明-----------------*/[/align]