CSS3 如何实现一个文字倒影效果呢?


摘要:
下文讲述css代码实现文字倒影的方法分享,如下所示;

实现思路:
     使用 webkit-box-reflect 文字倒影属性

例:
文字倒影示例分享

<meta charset="utf-8">
<p>
maomao365.com <br />
css实现文字倒影效果的示例分享
</p>
<hr />
<style>
  div{
  font-size: 66px;
  font-weight: bold;
 color: green;
 float: left;
width: 500px;
-webkit-box-reflect: below -28px
-webkit-gradient(linear,left top,left bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));
            }
</style>
<div>
  猫猫教程-倒影
</div>
css实现字体倒影的示例分享

css实现字体倒影的示例分享