使用 box-reflect 实现 CSS 图像反射

你知道 CSS 有一个自定义反射属性吗？
这个功能非常酷，可以将图像反射到特定的一侧。

我们可以使用 box-reflect 属性创建这些反射。

好奇地想看看反射是什么样子，请查看使用 box-reflect 的 Codepen。

使用 CSS 反射图像

对于我们的例子，我们使用了一个只使用一张图片的超级简单的标记。

<img src="myimage.png" />

然后我们可以使用 box-reflect 类来启用反射：

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

这将给我们以下结果：

我们可以使用以下选项：

• 以下
• 多于
• 左边
• 正确的

甚至放置一个偏移量：

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

更酷的是，我们可以使用第三个参数添加渐变作为淡出效果。

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

浏览器支持

Box-reflect 的支持度不算很好，但即将推出。目前 Firefox 和 IE 还不支持。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。