CSS3制作文字半透明倒影效果的两种实现方式

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

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

.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;
:100%;
left:0;
height:100%;
width:100%;
-webkit-transform:scaleY(-1);
}
.content h3:after{
content:'';
position:absolute;
z-index:2;
:100%;
left:0;
height:100%;
width:100%;
background:-webkit-gradient(linear, center , center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));/其他几个被省略了-_-!/
}
.content .next{
clear:both;
padding:60px;
}