-webkit-box-reflect各个属性值效果演示实例页面

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);
}
                

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>