Firefox和Chrome都支持的倒影效果实例页面

展示

代码

• HTML：

  <h4>下倒影</h4>
  <p class="reflect-below-p reflect-below"><img id="reflectBelow" src="/images/common/l/1.jpg"></p>
  
  <h4>右倒影</h4>
  <p class="reflect-right"><img id="reflectRight" src="/images/common/l/1.jpg"></p>
  <h4>右倒影同时有偏移</h4>
  <p class="reflect-right-space"><img id="reflectRightSpace" src="/images/common/l/1.jpg"></p>
  
  <h4>下倒影同时有遮罩（线性渐变）</h4>
  <p class="reflect-below-p reflect-below-mask"><img id="reflectBelowMask" src="/images/common/l/1.jpg"></p>
  
  <h4>下倒影同时有遮罩（使用png图片）</h4>
  <p class="reflect-below-p reflect-below-img"><img id="reflectBelowImg" src="/images/common/l/1.jpg"></p>
  

• CSS：

  img {
      width: 150px; height: 180px;
      object-fit: cover;
      object-position: right;
  }
  
  .reflect-below-p {
      padding-bottom: 176px;
  }
  .reflect-below img {
      -webkit-box-reflect: below;
  }
  .reflect-right img {
      -webkit-box-reflect: right;
  }
  .reflect-right-space img {
      -webkit-box-reflect: right 10px;
  }
  .reflect-below-mask img {
      -webkit-box-reflect: below 0 linear-gradient(transparent, white);
  }
  .reflect-below-img img {
      -webkit-box-reflect: below 0 url(../images/shuai.png);
  }
  
  @supports (background: -moz-element(#aaa)) {
      .reflect-below-p::after,
      .reflect-right::after,
      .reflect-right-space::after {
          content: "";
          position: absolute;
          width: 150px; height: 180px;
          pointer-events: none;
      }
      .reflect-below-p::after {
          display: block;
          transform: scaleY(-1);
      }
      .reflect-right::after,
      .reflect-right-space::after {
          transform: scaleX(-1);
      }
      .reflect-below::after {
          background: -moz-element(#reflectBelow) right / cover;
      }
      .reflect-below-mask::after {
          background: -moz-element(#reflectBelowMask) right / cover;
          mask-image: linear-gradient(transparent, white);
      }
      .reflect-below-img::after {
          background: -moz-element(#reflectBelowImg) right / cover;
          mask-image: url(../images/shuai.png);
      }
      .reflect-right::after {
          background: -moz-element(#reflectRight) right / cover;
      }
      .reflect-right-space::after {
          background: -moz-element(#reflectRightSpace) right / cover;
          margin-left: 10px;
      }
  }