适配性
既然是CSS3的特性，大家自然要看来看适配性：点一下查询
接下来，大家来掌握box-reflect怎样应用？
英语的语法以下：
-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>? box-reflect:none | <direction> <offset>? <mask-box-image>?
特性表明：
none：此值为默认设置值，表明无倒映；
direction：转化成倒映的方位
above：特定倒映在目标的上边 below：特定倒映在目标的下边 left：特定倒映在目标的左侧 right：特定倒映在目标的右侧
offset：照片与倒映间距
length：用长度值来界定倒映与目标之间的间距。能够为负值 percentage：用百分比来界定倒映与目标之间的间距。能够为负值
mask-box-image：用来设定倒映的遮罩实际效果；
值能够是：
none：无遮罩图象 url：应用肯定或相对性详细地址特定遮罩图象。 linear-gradient：应用线形渐变色建立遮罩图象。 radial-gradient：应用轴向(放射性性)渐变色建立遮罩图象。 repeating-linear-gradient：应用反复的线形渐变色建立背遮罩像。 repeating-radial-gradient：应用反复的轴向(放射性性)渐变色建立遮罩图象。
光是舍本逐末可不好，大家還是要根据案例看来看实际效果。
倒映的方位
在这个事例中，我弄了3个img：
<div class="box1"> <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" /> </div> <div class="box2"> <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" /> </div> <div class="box3"> <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" /> </div>
css以下：
.box1,.box2,.box3{
width:120px;
float:left;
margin-right:180px;
}
img{
width:100%;
}
.box1 img{
-webkit-box-reflect:right;
box-reflect:right;
}
.box2 img,.box3 img{
-webkit-box-reflect: above;
box-reflect:above;
}
.box3{
padding-top:200px;
}
实际效果图以下：
在这里有1个疑惑，box2和box3中的照片都设定了box-reflect:above，全是在顶部转化成投射，为何box2看不见实际效果呢？缘故便是我给box3设定了padding-top:200px，而box2沒有，基本估算是由于沒有室内空间让其显示信息转化成的倒映。
倒映与目标之间的间距
掌握了转化成倒映的方位后，大家看来第2个特性，還是看事例：
依然用3张照片，但是款式更改1下：
.box1 img{
-webkit-box-reflect:below 30px;
box-reflect:below 30px;
}
.box2 img{
-webkit-box-reflect:below ⑶0px;
box-reflect:below ⑶0px;
}
.box3 img{
-webkit-box-reflect:below 5%;
box-reflect:below 5%;
}
实际效果图以下：
接下来大家学习培训最终1个特性。
遮罩实际效果
（1）应用渐变色给倒映加上遮罩实际效果
.box1 img{
-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
}
实际效果以下：
应用情况图给倒映加上遮罩实际效果
最先大家必须1张5角星的png照片：
.box2 img{
-webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);
box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);
}
实际效果以下：
总结
好了，到这里，本文有关CSS3的box-reflect特性的英语的语法和应用早已详细介绍完了。期待本文的內容对大伙儿的学习培训或工作中带来1定的协助，假如有疑惑大伙儿能够留言沟通交流。
Copyright © 2002-2020 如何制作微信小程序_微信小程序源码_小程序码生成_凡科网微信小程序_微信公众号小程序 版权所有 （网站地图） 粤ICP备10235580号