码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现倒影-------Day80

时间:2014-08-02 01:51:32      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:css   学习记录   前端   

发现这个功能的时候很开心,结果不想竟然是个残次品,让我不禁想起了“天龙八部”上段誉的六脉神剑,在这个浏览器上可以,在另一个上就不管了啊,时灵时不灵的,不过有总比没有要来的好,一点点积累,总能攒齐的。

这个是在-webkit内核浏览器上支持的:-webkit-box-reflect

简单介绍下这个样式,可以有三种属性,<direction>方向、<offset>距离、<mask-box-image>其他样式

首先来看方向的话,存在四种可能性,left、right、below和above,上下左右嘛,来简单看下效果,写段简单的代码:

<center>
<div style="margin-top:300px;">
	<img src="run.gif" alt="跑1" id="run1" width="100px">
	<img src="run.gif" alt="跑2" id="run2"  width="100px">
	<img src="run.gif" alt="跑3" id="run3"  width="100px">
	<img src="run.gif" alt="跑4" id="run4"  width="100px">
</div></center>
<pre name="code" class="css">#run1{border:4px solid red;-webkit-box-reflect: left ;}
#run2{border:4px solid yellow;-webkit-box-reflect:right  ;}
#run3{margin-left:40px;border:4px solid blue; -webkit-box-reflect: below ;}<span style="font-family: Arial, Helvetica, sans-serif;">//这里是为了方便查看</span>
#run4{ border:4px solid green;-webkit-box-reflect: above ;}



这样分别来看下效果:

bubuko.com,布布扣

然后,第二个属性则是距离原图像的位置,这个则可以使用length距离来实现,也可以利用百分比percentage来实现,修改下样式来看下效果

#run2{ border:4px solid yellow; -webkit-box-reflect:below;}
#run3{margin-left:40px; border:4px solid blue; -webkit-box-reflect: below 100px;}
#run4{border:4px solid green;-webkit-box-reflect: below 100%;}
bubuko.com,布布扣

看起来的话length方法的设置看起来更明显,也更容易操作,所以还是建议用length

最后就是其它样式了,比方说看下面的

#run2{
	 border:4px solid yellow;
	 -webkit-box-reflect:below  0px -webkit-gradient(linear, left top, left bottom, from(rgba(150, 10, 100, 0.1)), to(rgba(10, 10, 0, 0.1)));
}
而实现的效果是:

bubuko.com,布布扣


暂时记录下当前浏览器的实现,然后今天还看到了个很潮的词,蒙版,我还真没做过呢,改天要看看

bubuko.com,布布扣





CSS实现倒影-------Day80,布布扣,bubuko.com

CSS实现倒影-------Day80

标签:css   学习记录   前端   

原文地址:http://blog.csdn.net/marsmile_tbo/article/details/38343453

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!