css实现文字倒影我们需要使用到box-reflect属性，但这个属性由于不属于W3C标准，所以使用这个属性之前还是得先

视频地址：点击查看

我们需要使用到box-reflect属性，但这个属性由于不属于W3C标准，所以使用这个属性之前还是得先加上浏览器内核前缀，另外这个属性大部分浏览器还是不兼容的，所以使用之前还是先考虑一下是否可以使用。

我们可以在 caniuse 上查看该属性的浏览器兼容效果。

打开caniuse网站，输入box-reflect，搜索就可以看到该属性在不同浏览器的兼容情况。

接下来我们先有一行文本，给这行文本添加倒影。

这个属性的第一个参数值为倒影的方向，支持这四种值。

第二个参数是文字倒影与原文字的距离，支持负数。

第三个参数类似background-image属性，可以使用线性渐变或径向渐变等控制倒影的颜色过渡。这里使用线性渐变，向上渐变，由全透明过渡到全不透明。

最后，看一下效果

/* 
  above 倒影在对象的上边
  below 倒影在对象的下边
  left  倒影在对象的左边
  right 倒影在对象的右边

  指定倒影与原文本的距离

  跟background-image属性值一致
*/
-webkit-box-reflect: below 
0px 
-webkit-linear-gradient(
  top,
  transparent,
  rgba(255,255,255,.2) 50%,
  rgba(255,255,255,1)
);