標籤：ati port doctype cal images dev document before lang
圖片倒影效果<!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）——圖片倒影效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
