给定一张有如下背景图的 div：

制作如下的倒影效果：

方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化， div 大小怎么变化，我们都不用去改我们的代码。

法一：-webkit-box-reflect

这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。不过兼容性过于惨淡：

基本上是只有 -webkit- 内核的浏览器才支持。

不过使用起来真的是方便，解题如下：

不过使用起来真的是方便，解题如下：

div{
    -webkit-box-reflect: below;
}

box-reflect 有四个方向可以选， below | above | left | right 代表下上左右，更具体的可以看看  。

div:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}