-webkit-box-reflect倒影属性值效果实例页面

展示

代码

• HTML：

  <h4>下倒影</h4>
  <p class="reflect-below-p"><img src="1.jpg" class="reflect-below"></p>
  
  <h4>右倒影</h4>
  <p><img src="1.jpg" class="reflect-right"></p>
  <h4>右倒影同时有偏移</h4>
  <p><img src="1.jpg" class="reflect-right-translate"></p>
  
  <h4>下倒影同时有遮罩（线性渐变）</h4>
  <p class="reflect-below-p"><img src="1.jpg" class="reflect-below-mask"></p>
  
  <h4>下倒影同时有遮罩（使用png图片）</h4>
  <p class="reflect-below-p"><img src="1.jpg" class="reflect-below-img"></p>

• CSS：

  .reflect-below-p {
      padding-bottom: 176px;
  }
  .reflect-below {
      -webkit-box-reflect: below;
  }
  .reflect-right {
      -webkit-box-reflect: right;
  }
  .reflect-right-translate {
      -webkit-box-reflect: right 10px;
  }
  .reflect-below-mask {
      -webkit-box-reflect: below 0 linear-gradient(transparent, white);
  }
  .reflect-below-img {
      -webkit-box-reflect: below 0 url(https://www.zhangxinxu.com/study/201608/shuai2.png);
  }