html图片倒影一张图让你快速控制CSS3倒影

示例图片

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

这便是本日所要提到的box-reflect属性。

html图片倒影一张图让你快速控制CSS3倒影 Webpack

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

box-reflect：none | <direction> <offset>? <mask-box-image>? （?代表可缺省，也便是后俩属性可有可无）

<direction> = above | below | left | right （分别代表：上 | 下 | 左 | 右）

<offset> = <length> | <percentage>（分别代表：固定值 | 百分比）

默认值：none

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

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

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

①只给一个属性值below。

< img class=\"大众img\"大众 src=\"大众imgs/cat.jpg\公众 />

/CSS代码/.img{ -webkit-box-reflect: below; box-reflect: below;}

实现效果：

②再加个5px的间距。

/CSS代码/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

实现效果：

③末了加个图片遮罩吧。

/CSS代码/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

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

实现效果：

这便是文章开头示例图片的终极效果。

接下来，再说说径向渐变创建图片遮罩和直策应用图片遮罩。

径向渐变的话实在跟线性渐变类似，只须要你节制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