语法:
box-reflect:包括3个值。
1。方向定义方向,取值包括以上,下,左,右。
上图:
指定倒影在对象的上边
:
指定倒影在对象的下边左
:
指定倒影在对象的左边
:
指定倒影在对象的右边
,
2。抵消定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定。默认为0。
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
,
3。mask-box-p_w_picpath定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。
取值:
没有:无遮罩图像:
使用绝对或相对地址指定遮罩图像。
使用线性渐变创建遮罩图像。
使用径向(放射性)渐变创建遮罩图像。
使用重复的线性渐变创建背遮罩像。
使用重复的径向(放射性)渐变创建遮罩图像。
说明:
设置或检索对象倒影。
对应的脚本特性为boxReflect。
如下:
<>之前,1,& lt; ! doctype html>, 2, & lt; html>, 3, & lt; head>, 4, & lt; meta charset=皍tf - 8”祝辞,5,& lt; title>无标题文档& lt;/title>, 6, & lt; style>, 7, .box{, 8,,,,宽度:200 px;, 9,,,,,身高:200 px; 10,,,,,背景:-webkit-linear-gradient(左,红、黄、绿);11,,,,,变换:规模(1,1);12,,,,,-webkit-box-reflect: below 10 px -webkit-linear-gradient(透明,transparent 50%, rgba(0, 0, 0, 0。8));, 13,}, 14日& lt;/style> 15, & lt;/head> 16, 17, & lt; body> 18, & lt; div 类=昂凶印痹? lt;/div> 19, & lt;/body> 20, & lt;/html>
上面是颜色线性渐变的倒影,同样咱们的图片也可做倒影特效。
img {
,,,,
,,,-webkit-box-reflect: below 10 px -webkit-linear-gradient(透明,transparent 50%, rgba (0, 0, 0, 0。8));
} ,
