这里气候宜人，物产丰富，风景优美，是中国重点风景旅游城市。多明媚的秋天哪，这里，再也不是焦土和灰烬，这是千万座山风都披着红毯的旺盛的国土。那满身嵌着弹皮的红松，仍然活着，傲立在高高的山岩上，山谷中汽笛欢腾，白望在稻田里缓缓飞翔。秋天的美是成熟的——它不像春那么羞涩，夏那么坦露，冬那么内向。
效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。
html代码如下：
复制代码
代码如下:<div class="content">
<h3 title="专业技能">专业技能</h3>
<div class="next"><!--其他内容--></div>
</div>
有两种实现方式：
1.box-reflect
(属性详情见http://css.doyoe.com/ 属性→边框→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支持（支持详情见 http://caniuse.com/#search=box-reflect）
FF和Opera不能兼容，所以有了以下替代方案。
2.transform属性的scaleY方式
受到神飞的博文和MDN的一个Demo源代码的启发
MDN Demo https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch
神飞：一些上流的CSS3图片样式 http://www.qianduan.net/css3-image-styles.html
复制代码
代码如下:.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;
}
注:前面h3元素浮动是为了让文字块的宽度动态地刚好等同文字宽度，否则块过长，导致after的遮罩延长，影响右边没有文字的部分
本文CSS3制作文字半透明倒影效果的两种如何实现方式到此结束。奇迹不过是努力的另一个名字，愿机会永远对你有利。小编再次感谢大家对我们的支持！
