CSS 图片镜像
在本章中，您将学习如何镜像一个图像。
CSS 图片镜像
box-reflect 属性用于创建图像镜像。
box-reflect 属性的值可以是：below、above、left 或 right。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
后面带有 -webkit- 的数字表示需要加前缀才能使用的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | 不支持 | 4.0 -webkit- | 15.0 -webkit- |
示例
CSS 镜像偏移
要指定图像与镜像之间的间隙，请在 box-reflect 属性中添加间隙大小。
CSS 带有渐变的镜像
我们还可以创建镜像的渐隐效果。
示例
创建镜像的渐隐效果
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
自己动手试一试 »
