实现效果：
这就是文章开头示例图片的最终效果。
接下来，再说说径向渐变创建图片遮罩和直接使用图片遮罩。
径向渐变的话其实跟线性渐变类似，只需要你掌握CSS3中基本的径向渐变方法，给个简单示例吧：
/*CSS代码*/
.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent);
box-reflect: left 0 radial-gradient(#000 30%,transparent);}实现效果：
效果很棒！好像猫咪真的在照镜子一样~~
那如果直接使用图片遮罩呢？比如说我用这样一张图片作为遮罩：
/*CSS代码*/
.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}实现效果：
mask.png
可以看出，遮罩图片会完全拉伸填充倒影图片，并且效果是完全透明部分不会显示出来（其实CSS3渐变图片遮罩原理也跟这个是一样的）。
需要注意的是：以上讲的所有效果不仅仅可以用在图片上，用在其他元素上也是完全可以的，比如说文字。
兼容性：box-reflect虽然看起来效果很不错，但是遗憾的是，目前只有webkit内核浏览器兼容，不过移动端基本已经没有任何问题啦~~
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。
