前端必知必会-CSS 图像反射

---

CSS 图像反射

CSS 图像反射

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

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

示例
这里我们希望反射在图像下方：

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

示例
这里我们希望反射在图像的右侧：

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

CSS 反射偏移

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

示例
这里我们希望反射位于图像下方，偏移量为 20px：

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

带渐变的 CSS 反射

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

示例
在反射上创建淡出效果：

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

---

总结

本文介绍了CSS 图像反射的使用，如有问题欢迎私信和评论