通过一张图教会你CSS3倒影的实现

前言

本文主要给大家介绍了关于CSS3倒影实现的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

效果图如下：

示例图片

在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效果变得非常简单，只需一个CSS3属性就可以轻松实现了。

这就是今天所要提到的box-reflect属性。

咱们先看看W3C给出的box-reflect语法：

box-reflect可给两种属性值，一种是none，为默认值，也就是没有任何倒影效果，另一种才是我们今天所要讲的，它可以同时赋予三个属性值，它们依次代表倒影方向、元素与倒影之间的距离以及加在倒影上的遮罩图像，其中后两个属性值可以缺省，但如果<mask-box-image>存在，则<offset>必填。

说了那么多干巴巴的解释，还是联系一下示例应该更好理解些吧。

我们现在来一步步地实现文章开头示例图片的投影效果：

①只给一个属性值below。

实现效果：

②再加个5px的间距。

实现效果：

③最后加个图片遮罩吧。

这里的图片遮罩没有用图片，而是用了CSS3中的linear-gradient属性值，它就是用于线性渐变，具体用法这里就不提了，可以直接看这里（https://www.Vevb.com/css/369475.html)，写得很详细。