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));
}
亲自尝试 »
