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