CSS3 box-reflect 倒影效果

我这人没事爱琢磨别人网页，看别人网页的源代码，然而很多代码都不懂，不懂我就跑去查询；今天看一个有趣的3D案例的时候，看见这样一串代码，可以做出倒影效果，刚开始我还是看不懂的。

 -webkit-box-reflect: below 8px 
 -webkit-linear gradient(transparent,rgba(0,0,0,0.7));

关于box-reflect具体的语法：

box-reflect：none | <direction> <offset>? <mask-box-image>?

none:代表无倒影； 

<direction>
above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边; 

<offset>
<length>：
用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>：
用百分比来定义倒影与对象之间的间隔。可以为负值; 

<mask-box-image>
none：
无遮罩图像
<url>：
使用绝对或相对地址指定遮罩图像。
<linear-gradient>：
使用线性渐变创建遮罩图像。
<radial-gradient>：
使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：
使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：
使用重复的径向(放射性)渐变创建遮罩图像。 

这样解析起来，刚才那串代码的意思大概就是：

//向下倒影 八个像素
 -webkit-box-reflect: below 8px 
//使用线性渐变创建遮罩图像,由透明渐变到0.7的透明度
 -webkit-linear gradient(transparent,rgba(0,0,0,0.7));

效果图如下：

便于理解，举几个例子：

HTML代码：

<strong>下倒影</strong>
<p class="reflect-below-p"><img src="chaowei.jpg" class="reflect-below"></p>


<strong>右倒影</strong>
<p><img src="chaowei.jpg" class="reflect-right"></p>
<strong>右倒影同时有偏移</strong>
<p><img src="chaowei.jpg" class="reflect-right-translate"></p>


<strong>下倒影同时有遮罩（线性渐变）</strong>
<p class="reflect-below-p"><img src="chaowei.jpg" class="reflect-below-mask"></p>


<strong>下倒影同时有遮罩（使用png图片）</strong>
<p class="reflect-below-p"><img src="chaowei.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(shuai2.png);
}

例子来源张鑫旭大神博客