[分享]css3图片倒影效果

CSS3中提供了许多漂亮的图片效果，其中之一就是图片倒影效果。通过CSS3中的属性，可以很方便地在图片下方添加倒影效果。img{ webkitboxreflect: below 0px webkitg...

CSS3中提供了许多漂亮的图片效果，其中之一就是图片倒影效果。通过CSS3中的属性，可以很方便地在图片下方添加倒影效果。

img{
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.1)));
    box-reflect: below 0px linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1));
} 

上述代码中，-webkit-box-reflect表示应用倒影效果到webkit浏览器中；box-reflect则是标准写法。below 0px表示倒影在图片下方；linear-gradient则是渐变效果。from(transparent)表示图片下方没有倒影，to(rgba(255, 255, 255, 0.1))表示倒影从图片下方渐变到透明度为0.1的白色。

通过这样一行代码，可以很容易地为图片添加倒影效果。更多CSS3效果请大家自行学习。