CSS 盒反射
`-webkit-box-reflect` CSS 属性允许您将元素的内容沿特定方向反射。
我们可以使用 box-reflect 属性创建反射。
/* Direction values */
-webkit-box-reflect: above / below / left / right;
/* can also add offset value */
-webkit-box-reflect: below 10px;
/* even add gradient */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
例子
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/2fea277d-540b-42af-b152-782940dc49ef/de4cpd0-caed317f-b05d-4852-acb8-3ce25b38d873.png" />
img {
-webkit-box-reflect: right;
}
输出：
点击此处查看 Codepen 示例：
浏览器支持🌐
Box-reflect 目前的支持还不完善，但正在逐步改进。目前，Firefox 和 IE 完全不支持该功能。
参考🧐
| 🌟推特 | 👩🏻💻 suprabha.me |