CSS 图像反射

在本章中，您将学习如何反映图像。

这个box-reflect属性用于创建图像反射。

的值box-reflect属性可以是：below,above,left，或者right。

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

-webkit- 后面的数字指定使用前缀的第一个版本。

Property
box-reflect	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

这里我们想要图像下方的反射：

img {
-webkit-box-reflect: below;
}

这里我们想要图像右侧的反射：

img {
-webkit-box-reflect: right;
}

要指定图像和反射之间的间隙，请将间隙的大小添加到box-reflect属性。

这里我们想要图像下方的反射，偏移量为 20px：

img {
-webkit-box-reflect: below 20px;
}

我们还可以在反射上创建淡出效果。

在反射上创建淡出效果：

img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}