CSS：实现倒影效果 （box-reflect）

box-reflect 设置倒影

• 语法
  box-reflect：none | <direction> <offset> <mask-box-image>

  ▪︎ <direction>：
     ▫︎ above 指定倒影在对象的上边 
     ▫︎ below 指定倒影在对象的下边 
     ▫︎ left 指定倒影在对象的左边 
     ▫︎ right 指定倒影在对象的右边
  ▪︎ <offset>：
     ▫︎ <length> 用长度值来定义倒影与对象之间的间隔。(可以为负值)
     ▫︎ <percentage> 用百分比来定义倒影与对象之间的间隔。(可以为负值)
  ▪︎ <mask-box-image>： 
     ▫︎ none 无遮罩图像
     ▫︎ <url> 使用绝对或相对地址指定遮罩图像
     ▫︎ <linear-gradient> 使用线性渐变创建遮罩图像
     ▫︎ <radial-gradient> 使用径向(放射性)渐变创建遮罩图像
     ▫︎ <repeating-linear-gradient> 使用重复的线性渐变创建背遮罩像
     ▫︎ <repeating-radial-gradient> 使用重复的径向(放射性)渐变创建遮罩图像
  

• 默认值：none （无倒影）

• 举例

   <div class="reflect">我喜欢你 <img src="爱心.png" alt=""></div>
  

   .reflect {
        -webkit-box-reflect: below;
  }
  

  
  可以加上线性渐变效果，使倒影看起来更真实。

  .reflect {
  	-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .3));
  }