CSS3文字倒影

1，文字倒影與文字投影並不是一回事

      投影文字跟原文字是平行移動的，而倒影文字與原文字是對稱的

2，文字倒影的屬性是webkit-box-reflect

 -webkit-box-reflect: above-10px；

-webkit-box-reflect: below -10px；

-webkit-box-reflect: left-10px；

-webkit-box-reflect: right-10px;

是各個方向的投影，以及投影與原文字圖形之間的距離。

3.可以根據需求自己定義顏色、文字顯示，以及漸變色等。

-webkit-box-reflect: right-10px;

color:red;

或者定義漸變色：

-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)));

<div class="row row1">
	<div class="erp">ERP</div>
	<div class="plm">PLM</div>
</div>

　　

.row1{
            position: absolute;
            left: 0;
            top: 124px;
            height: 73px;
            div{
              font-size: 72px;
              font-weight: bold;
              color: #50fdff;
              float: left;
              width: 645px;
              -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)));
            }
          }

　效果圖