用CSS3的box

日期:2021-03-03 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

适配性

既然是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定的协助,假如有疑惑大伙儿能够留言沟通交流。

上一篇:CSS完成梯形标识页的方式 返回下一篇:没有了