依赖的css3属性：box-reflect

对应语法：

box-reflect ： none | <direction> <offset>? <mask-box-image>?
<direction> ： above | below | left | right
<offset>    ： <length> | <percentage>
<mask-box-image> ：  none | <url> | <linear-gradient> |<radial-gradient> |<repeating-linear-gradient> | <repeating-radial-gradient>
继承性：无
动画性：否
计算值：指定值

语法简介：

none：无倒影
< direction >：倒影的位置
above：上方
below：下方
left ：左侧
right ：右侧

< offset >：与倒影之间的距离

  < length >：用长度值来定义倒影与对象之间的间隔。可以为负   < percentage >：用百分比来定义倒影与对象之间的间隔。可以为负值

< mask-box-image > ：设置遮罩图像

none：无遮罩图像< url >：使用绝对或相对地址指定遮罩图像。< linear-gradient >：使用线性渐变创建遮罩图像。< radial-gradient >：使用径向(放射性)渐变创建遮罩图像。< repeating-linear-gradient >：使用重复的线性渐变创建背遮罩像。< repeating-radial-gradient >：使用重复的径向(放射性)渐变创建遮罩图像。

说明：
设置或检索对象倒影。
假设定义了 < mask-box-image >，< offset >必须指定，否则可以省略
对应的脚本特性为boxReflect。
兼容性：
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

倒影实例

1.只设置位置

代码：

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

2.设置与倒影间的距离

代码：

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

3，通过遮罩，利用渐变实现真实倒影效果

 img{-webkit-box-reflect:below 10px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(1%,transparent),to(rgba(250,250,250,0.1)));}

如何使用css3实现图片倒影效果相关推荐

html怎么给图片加倒影,用CSS3实现图片倒影效果，同时给出兼容早期版本IE的方案...
关于倒影效果,相信大家都不陌生.它在web2.0时代颇受欢迎,几乎每个网站都喜欢使用一下,至少可以让网站的设计跟得上时代的步伐. 现在,这种效果虽然谈不上时尚,但仍然符合大众的审美标准.用的人少了,大 ...
HTML5/CSS3实现图片倒影效果
在线演示本地下载
html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 body{ text-align: center; } .container{ display: flex; just ...
[css] 请使用css3实现图片的平滑转换
[css] 请使用css3实现图片的平滑转换以全局监听的方式通过 a 标签的描点进行 view 动态切换页面,只要把 a 标签带有 id 的 href 属性的值指到锚点,用 CSS3 的动画进行切换 ...
CSS3动画 - 图片开关灯阴影动画
1. 效果图 2. 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
css3为图片添加鼠标移入放大效果
css3为图片添加鼠标移入放大效果只需要为添加效果的图片定义一个伪类 img.zoom-img:hover {-webkit-transform: scale(1.15);-webkit-trans ...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
【CSS3】 CSS3实现“图片阴影”效果
学习前端有点类似于学习英语,很多东西需要一点点累积,下面讲解CSS3实现图片阴影效果. 1.效果展示:Shadow Effect这个块有阴影的效果,尤其是底边的曲线阴影非常明显,本文主要以" ...

如何使用css3实现图片倒影效果