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

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

这个是在-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 ;}

这样分别来看下效果：

然后，第二个属性则是距离原图像的位置，这个则可以使用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%;}

看起来的话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)));}

而实现的效果是：

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