CSS3之box-reflect制作倒影

box-reflect

box-reflect:none | ? ?

参数:

参数 above | below | left | right

none : 无倒影
above:指定倒影在对象的上边
below:指定倒影在对象的下边
left:指定倒影在对象的左边
right:指定倒影在对象的右边

参数:

|
: 用长度值来定义倒影与对象之间的间隔。可以为负值
: 用百分比来定义倒影与对象之间的间隔。可以为负值

参数:

none | | | | |
none:无遮罩图像
: 使用绝对或相对地址指定遮罩图像。
: 使用线性渐变创建遮罩图像
: 使用径向(放射性)渐变创建遮罩图像
:使用重复的线性渐变创建背遮罩像
:使用重复的径向(放射性)渐变创建遮罩图像


下面就开始简单的玩耍一下吧

准备两张图片吧


image
image

简单的demo

倒影的位置一定要有空间可看到

-webkit-box-reflect: left;

效果:

image.png

-webkit-box-reflect: right;

效果:

image.png

-webkit-box-reflect: above;
image.png
-webkit-box-reflect: below -2px;// -2px是为了去掉连接处的缝隙
image.png

如何加遮罩效果呢

-webkit-box-reflect: right 0px -webkit-linear-gradient(left,transparent,rgba(0,0,0,0.6));
image.png
-webkit-box-reflect: left -1px -webkit-linear-gradient(left,rgba(12,93,163,0.8),rgba(12,93,163,0.1));
image.png

注意: 假设定义了必须指定,否则可以省略

添加字的倒影

-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 50%,rgba(250,250,250,0.1)); 
image.png

兼容性

image.png

参考资料:

【box-reflect】
【W3Cplus制作倒影】

你可能感兴趣的:(CSS3之box-reflect制作倒影)