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

　效果图

CSS3文字倒影