图片倒影效果
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>Document</title> ?<style> ???div { ???margin: 50px auto; ???width: 200px; ???height: 200px; ???background-image: url(‘http://images2015.cnblogs.com/blog/608782/201609/608782-20160926101029078-1479229145.jpg‘); ???position: relative;}div:before { ???content: ""; ???background-image: inherit; ???position: absolute; ???top: 100%; ???left: 0; ???right: 0; ???bottom: -100%; ???transform: rotateX(180deg);}div:after { ???content: ""; ???position: absolute; ???width: 200px; ???height: 200px; ???bottom: -200px; ???background: linear-gradient(0deg, rgba(255, 255, 255, 1)0%, rgba(255, 255, 255, 0)100%); ???z-index: 2;} ?</style></head><body> ?<div></div></body></html>CSS特效（9）——图片倒影效果
原文地址：https://www.cnblogs.com/janas-luo/p/9604862.html